编辑导语：手风琴菜单经常在多级目次中利用，是系统设计中常见的设计之一。本文作者主要分享了用Axure9动态面板如何实现手风琴菜单结果，一起来看看~

在进修动态面板的时候，看到5分钟玩转Axure之动态面板（进阶）手风琴菜单结果很好，只是写的不足具体，在一番探索后，貌似达到了同样的结果。所以分享出来，做一个简朴的示例说明。

步调如下：

一、拖拉元件

（1）先拖一个动态面板，定名：手风琴菜单

（2）给“手风琴菜单”添加一个状态，定名：一级菜单

（3）在“一级菜单”里，添加3个矩形框作为一级菜单项，3个箭头作为模仿菜单打开封锁结果，3个动态面板作为二级菜单内容，别离定名清楚（定名只是为了我们交互时可以清晰看到元件名称，利便查抄逻辑），结果如下：

（4）给“二级菜单1”配置不行见和自适应内容，并添加一个状态，添加3个矩形框作为二级菜单项

（5）同样搞定“二级菜单2”、“二级菜单3”，结果如下：

二、添加交互

（1）给矩形框“一级菜单1”添加“单击”交互，结果是将对应的“二级菜单1”内容给展开和折叠。

（2）添加事件“单击时”，单击有2个景象：展开和折叠

（3）添加景象“展开”，条件是动态面板“二级菜单1”不行见时

（4）添加行动“移动”，将动态面板“二级菜单1”移动达到矩形框“一级菜单1”的底部（坐标可以用编辑器来完成，用变量好过于本身计较牢靠值）

（5）添加行动“显示/埋没”，将动态面板“二级菜单1”显示出来，而且把下方的元件往下推

（6）添加行动“旋转”，将图标“箭头1”旋转180°

（7）添加景象“折叠”，条件是动态面板“二级菜单1”可见时

（8）添加行动“显示/埋没”，将动态面板“二级菜单1”埋没起来，而且下方的元件往回拉

（9）添加行动“旋转”，将图标“箭头1”旋转180°

逻辑解读就是当鼠标点击菜单1时将菜单1的子项展示出来，二次点击时埋没起来。箭头的结果聊胜于无。

同样的 *** ，来配置别的2个一级菜单的单击交互。只是把元件搞清楚不要混了，这时候定名的重要性就浮现出来了。

这只是一个简朴实现的手风琴菜单，进阶应该是用中继器（这个还没学会）。