手风琴菜单效果很好,只是写的不够详细,在一番摸索后,貌似到达了同样的效果。所以分享出来,做一个简单的示例说明。
步骤如下:
一、拖拉元件
(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个一级菜单的单击交互。只是把元件搞清楚不要混了,这时候命名的重要性就体现出来了。