AXURE-超详细折叠菜单实现

这个折叠菜单简把我弄崩了，苍天呀，这里记录一下，希望后来的人少入点坑

所用版本为最新的Axure 8.0,我还不怎么会用动态面板呢，难死宝宝了

1.最终效果图

 

      变成

      

再变成

          

实现步骤1

         1，首先建立一个动态面板，左边的元件区拖出来就可以了（这个地方先不要改动态面板的属性：自动调整为内容尺寸，一会在改，将改动态面板取名为1。

         2.进入动态面板1的State1,画一个黄色的矩形和黑色的矩形，将黑色矩形的属性改为隐藏，排列成下图

            

 2. 创建动态面板1的State2

    同样的在State2中画一个相同的黄色矩形和黑色矩形，唯一不同的地方是State2的黑色矩形的状态是可见的，不是隐藏的，见下图

    

此时一定要检查一下动态面板1的属性：自动调整为内

内容尺寸   前面打了勾，

3，给动态面板1添加鼠标单击时间

     选择State1的黄色矩形，点击属性里的鼠标单击事件，

注意上面这些地方

4，给折叠菜单加上点一下收回来的效果

  同样的找到State2的黄色矩形，找到它的鼠标单击事件。

  

5，回到主页面，我经常搞错，玩命的单击某一个原件，后来发现这个元件和我想操作的所在页面不一致，感觉尬尬的

    

6，将动态面板1复制一份，将两个黄色矩形放在一起，预览看效果

这样就可以了，真的可以，嘿嘿嘿