起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程：鼠標(biāo)移入時切換菜單
上一篇文章《Axure教程：實現(xiàn)菜單下拉效果》里使用了最簡單的方式實現(xiàn)了菜單下拉效果，這個案例實現(xiàn)的是當(dāng)鼠標(biāo)移入菜單項的時候切換菜單且有且只有一個菜單項是展開的。
預(yù)覽圖
鼠標(biāo)移入“菜單2”后：
預(yù)覽地址：https://64y9da.axshare.com
所需元件
兩個菜單矩形、兩個菜單子項動態(tài)面板、一個向上箭頭、一個向下箭頭。
操作步驟
（1）設(shè)置“菜單1”矩形的第一個交互：鼠標(biāo)移入時，讓菜單變?yōu)檫x中狀態(tài)
（2）設(shè)置“菜單1”矩形的第二個交互：選中改變時，分兩種情況去隱藏和顯示動態(tài)面板
1）Case1：當(dāng)“菜單1”非選中時，隱藏“菜單1子項”動態(tài)面板：
2）Case2：當(dāng)“菜單1”選中時，顯示“菜單1子項”動態(tài)面板：
（3）同樣地設(shè)置好矩形2的交互
（4）將“菜單1”矩形和“菜單2”矩形設(shè)置成同一選項組
（5）按F5預(yù)覽原型看看
小記
1. 這里可以“菜單1”矩形和“菜單2”矩形只用一個交互動作即實現(xiàn)鼠標(biāo)移入切換菜單且有且只有一個菜單項是展開的效果。
2. 為什么不這樣做？
因為這個案例里就只有兩個菜單，如果有10個，那你就得在顯示一個菜單子項時將其他9個菜單子項隱藏起來，那就會非常麻煩而Axure提供的選項組功能在這里就可以派上用場。
選項組的功能就是讓在一個選項組里的所有元件有且只有一個是選中狀態(tài)，利用這個功能就我們雖然多了一個交互但卻節(jié)省了很多的工作。
3. 當(dāng)你快速在兩個菜單項里來回切換的時候會出現(xiàn)這種情況，可以去試試非常有趣哈哈：
4. 至于為什么會出現(xiàn)這種情況是因為在設(shè)置“菜單”矩形交互的顯示隱藏效果時沒有將動畫效果取消掉，當(dāng)你快速切換時，頁面反應(yīng)不過來就把矩形一直往下推了
附上無bug原型地址：https://gx8op7.axshare.com
#相關(guān)閱讀#
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議
你好！請問你設(shè)置的那個菜單1箭頭等于口是什么？我使用9版本，沒找到這個功能
那個是Font Awesome字體來的，不是Axure功能。簡單介紹我在這篇文章末尾有介紹http://www.aharts.cn/rp/3146472.html
好的，謝謝
您好，請問如何解決這個BUG？
4.至于為什么會出現(xiàn)這種情況是因為在設(shè)置“菜單”矩形交互的顯示隱藏效果時沒有將動畫效果取消掉，當(dāng)你快速切換時，頁面反應(yīng)不過來就把矩形一直往下推了
解決bug的方法：將動畫效果取消掉。圖片里也有顯示哦。