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

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

軟件版本：Axure RP v10

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

2個知識點：

1. 控件選中樣式設(shè)置；
2. 控件的選項組概念應(yīng)用。

一、添加元件

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

分別為以下分組：

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

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

添加樣式

選中樣式入口

一級菜單選中樣式

二級菜單選中樣式

二、設(shè)置事件

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

三、設(shè)置選項組

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

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

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

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