先看效果

第一步：

先把自定義的下拉菜單樣式設(shè)計(jì)好，注意組件結(jié)構(gòu)

第二步：

批量編輯子選項(xiàng)按鈕的懸停，點(diǎn)擊和選中的樣式

     1.批量選中所有按鈕

     2.點(diǎn)擊右側(cè)面板的交互樣式中的 鼠標(biāo)懸停

     3.編輯自定義按鈕樣式

用同樣的方法，設(shè)置下拉框 的交互樣式

第三步：

把選項(xiàng)和背景一起設(shè)為動(dòng)態(tài)面板，并命名“下拉選項(xiàng)-01”，

命名最好在后面帶幾個(gè)數(shù)字，因?yàn)檫@樣在后面使用到該組件的時(shí)候方便搜索使用

第四步：

設(shè)置點(diǎn)擊下拉框時(shí)的選中狀態(tài)，并根據(jù)選中的狀態(tài)來決定下來菜單是否顯示和箭頭的上下狀態(tài)。

    1.單擊下拉框，切換其選中狀態(tài)。

2.設(shè)置 選中時(shí) 的樣式和狀態(tài)：顯示下拉選項(xiàng)面板+箭頭向下（這里建議用絕對(duì)值）

顯示下拉選項(xiàng)面板

箭頭向下

同樣的方法，設(shè)置下拉菜單的取消選中時(shí)的狀態(tài)樣式。

第五步：

設(shè)置點(diǎn)擊選項(xiàng)時(shí)的效果

    1.下拉選項(xiàng)面板收起，其實(shí)就是讓下拉框處于 取消選擇狀態(tài)

    2.把選中的下來選項(xiàng)回顯在下拉框上

       這里使用axure函數(shù)變量[[This.text]]來設(shè)置

設(shè)置好后，就可以復(fù)用了。右鍵交互事件Case 1復(fù)制（Ctrl+c），然后反擊下面兩個(gè)選項(xiàng)，一個(gè)一個(gè)粘貼（Ctrl+v）.

到這里基本就差不多了，

最后，把下拉選項(xiàng)動(dòng)態(tài)面板隱藏。

再把這個(gè)組件設(shè)為動(dòng)態(tài)面板

然后勾選“自動(dòng)調(diào)整為內(nèi)容尺寸”，這樣的好處時(shí)隱藏掉的部分，不再占用空間，更有利于原型的排版。

但是有一點(diǎn)，這樣做的話，顯示隱藏時(shí)的推拉組件功能會(huì)對(duì)動(dòng)態(tài)面板外的組件失效。

到這里就大功告成了。

案例源文件鏈接：

https://pan.baidu.com/s/1nw4UWMP

---

更多AXURE實(shí)例教程和可交互組件

請(qǐng)關(guān)注產(chǎn)品館微信公眾號(hào)