怎么在Axure中，使用選項組，實現多級菜單點擊選中效果？這篇文章里，作者總結了相關步驟如添加元件、設置事件等，做了一定的梳理和分享，一起來看看吧。

演示效果地址：https://gtrfz2.axshare.com

軟件版本：Axure RP v10

適用場景：后臺原型設計需要多級菜單，通過鼠標點擊交互效果。

2個知識點：

1. 控件選中樣式設置；
2. 控件的選項組概念應用。

一、添加元件

1）首先，頁面增加4個矩形組件。

分別為以下分組：

• 一級菜單：Menu 1、Menu 2；
• 二級菜單：Menu 2.1、Menu 2.2（從屬一級菜單Menu 2，建立從屬關系接下來會講）。

2）分別設置組件樣式，這里我們選擇使用控件的選中樣式Selected Style，設置鼠標點擊后的效果。我這里是一級菜單填充了顏色，二級菜單透明度70%，字體加粗，用以區分。

添加樣式

選中樣式入口

一級菜單選中樣式

二級菜單選中樣式

二、設置事件

1）設置全部矩形組件的鼠標點擊事件為Set Selected/Checked – This Widget。這里需要解釋“This Widget”默認就是當前組件，而不用給每個組件都起名字。

三、設置選項組

鍵盤按住Shift鼠標分別點擊一級菜單組件：Menu 1、Menu 2，右側找到功能入口（因為Axure 10默認隱藏了這個入口），并設置選項組為“一級菜單”。

同理重復上述步驟，設置Menu 2.1、Menu 2.2，選項組為“二級菜單”。

PS：Axure選項組的作用，即同一選項組內只能有一個組件處于選中狀態。這樣我們點擊任一組件，其他組件就會自動取消選中狀態。

大功告成，趕緊預覽一下，看看效果吧~