Axure教程—折叠面手风琴效果

上文中介绍了用Axure制作折叠面板的基础制作，这次介绍折叠面板手机风琴效果
效果

预览地址：https://e18rf6.axshare.com
功能
点击标题展开内容，点击另一标题，其展开的内容折叠

制作
拖入四个动态面板，分别命名为1、2、3、4，其尺寸设置为698*45，如图排版：

每个动态面板设置两个状态state1和state2，如图:

依照动态面板1为例子
点击进入state1，设计标题，
拖入一个矩形元件，设置文本内容和尺寸（与动态面板大小一致），并在其右侧加入向右的箭头，如图：

点击进入state2，设计标题以及内容，
拖入矩形元件，大小设置为698105，在此矩形中拖入一个矩形，尺寸设置为69845(与state1的尺寸一致)，标题内容为“移动端数据可视化”，并在矩形右侧加入向下箭头，在此标题矩形下方设置文本，如图：

动态面板2的标题和内容、3的标题和内容，4的标题和内容参照动态面板1设置，最终设置，如图：

标题和内容根据自己需要进行设置

交互设置

1、动态面板1
进入state1，点击标题对其鼠标点击时进行交互设置，
动态面板1的状态选择state2，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
动态面板2、3、4的状态选择为state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
如图

进入state2，点击标题对其鼠标点击时进行交互设置
动态面板的状态选择state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，如图

2、动态面板2
进入state1，点击标题对其鼠标点击时进行交互设置，
动态面板2的状态选择state2，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
动态面板1、3、4的状态选择为state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
如图

进入state2，点击标题对其鼠标点击时进行交互设置
动态面板的状态选择state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，如图

3、动态面板3
进入state1，点击标题对其鼠标点击时进行交互设置，
动态面板3的状态选择state2，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
动态面板1、2、4的状态选择为state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
如图

进入state2，点击标题对其鼠标点击时进行交互设置
动态面板的状态选择state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，如图

4、动态面板4
进入state1，点击标题对其鼠标点击时进行交互设置，
动态面板4的状态选择state2，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
动态面板1、2、3的状态选择为state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，
如图

进入state2，点击标题对其鼠标点击时进行交互设置
动态面板的状态选择state1，进入或退出动画都选择“无”，时间设置为500毫秒，勾选推动/拉动元件，方向向下，无动画，时间为500毫秒，如图

整体设计完毕