Axure滑鼠移入時切換選單方法

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

預覽圖

滑鼠移入“選單2”後：

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

所需元件

兩個選單矩形、兩個選單子項動態面板、一個向上箭頭、一個向下箭頭。

操作步驟

（1）設定“選單1”矩形的第一個互動：滑鼠移入時，讓選單變為選中狀態

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

1）Case1：當“選單1”非選中時，隱藏“選單1子項”動態面板：

2）Case2：當“選單1”選中時，顯示“選單1子項”動態面板：

（3）同樣地設定好矩形2的互動

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

（5）按F5預覽原型看看

小記

1. 這裡可以“選單1”矩形和“選單2”矩形只用一個互動動作即實現滑鼠移入切換選單且有且只有一個選單項是展開的效果。

2. 為什麼不這樣做？

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

選項組的功能就是讓在一個選項組裡的所有元件有且只有一個是選中狀態，利用這個功能就我們雖然多了一個互動但卻節省了很多的工作。

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

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

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

#相關閱讀#

Axure教程：實現選單下拉效果

本文由 @Nilz 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash ，基於 CC0 協議