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

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

軟件版本：Axure RP v10

適用場(chǎng)景：后臺(tái)原型設(shè)計(jì)需要多級(jí)菜單，通過鼠標(biāo)點(diǎn)擊交互效果。

2個(gè)知識(shí)點(diǎn)：

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

一、添加元件

1）首先，頁(yè)面增加4個(gè)矩形組件。

分別為以下分組：

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

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

添加樣式

選中樣式入口

一級(jí)菜單選中樣式

二級(jí)菜單選中樣式

二、設(shè)置事件

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

三、設(shè)置選項(xiàng)組

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

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

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

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