上一篇文章《Axure教程：實現(xiàn)菜單下拉效果》里使用了最簡單的方式實現(xiàn)了菜單下拉效果，這個案例實現(xiàn)的是當鼠標移入菜單項的時候切換菜單且有且只有一個菜單項是展開的。

預覽圖

鼠標移入“菜單2”后：

預覽地址：https://64y9da.axshare.com

所需元件

兩個菜單矩形、兩個菜單子項動態(tài)面板、一個向上箭頭、一個向下箭頭。

操作步驟

（1）設置“菜單1”矩形的第一個交互：鼠標移入時，讓菜單變?yōu)檫x中狀態(tài)

（2）設置“菜單1”矩形的第二個交互：選中改變時，分兩種情況去隱藏和顯示動態(tài)面板

1）Case1：當“菜單1”非選中時，隱藏“菜單1子項”動態(tài)面板：

2）Case2：當“菜單1”選中時，顯示“菜單1子項”動態(tài)面板：

（3）同樣地設置好矩形2的交互

（4）將“菜單1”矩形和“菜單2”矩形設置成同一選項組

（5）按F5預覽原型看看

小記

1. 這里可以“菜單1”矩形和“菜單2”矩形只用一個交互動作即實現(xiàn)鼠標移入切換菜單且有且只有一個菜單項是展開的效果。

2. 為什么不這樣做？

因為這個案例里就只有兩個菜單，如果有10個，那你就得在顯示一個菜單子項時將其他9個菜單子項隱藏起來，那就會非常麻煩而Axure提供的選項組功能在這里就可以派上用場。

選項組的功能就是讓在一個選項組里的所有元件有且只有一個是選中狀態(tài)，利用這個功能就我們雖然多了一個交互但卻節(jié)省了很多的工作。

3. 當你快速在兩個菜單項里來回切換的時候會出現(xiàn)這種情況，可以去試試非常有趣哈哈：

4. 至于為什么會出現(xiàn)這種情況是因為在設置“菜單”矩形交互的顯示隱藏效果時沒有將動畫效果取消掉，當你快速切換時，頁面反應不過來就把矩形一直往下推了

附上無bug原型地址：https://gx8op7.axshare.com

#相關閱讀#

Axure教程：實現(xiàn)菜單下拉效果

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議