今天和大家分享的Axure案例是折叠面板
折叠面板是移动端APP中常见的组件之一，有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果，然后再对该组件进行详细讲解。
一、功能介绍
折叠或展开多个面板内容，默认为展开一项内容，点击任一收起的选项，展开面板，点击已展开的选项，收起面板
二、制作过程
1、制作原型
原型是由矩形组件以及动态面板构成，
拖入三个矩形组件分别命名为“1”、“2”、“3”，双击矩形输入相应的文字，在三个矩形中分别拖入三个动态面板，分别命名为”箭头1“、”箭头2“和”“箭头3”，每个动态面板中为两个状态，分别加入“上”和“下”两个箭头标识，在每个矩形下方拖入分别拖入动态面板，分别命名为“1”、“2”、“3”，在动态面板中输入内容，如图：
2、交互设计
（1）矩形“1”交互设置
点击矩形“1”对其“鼠标点击时“设置选中状态为”toggle“,
“选中改变时”设置
if 选中状态于 This == true
显示动态面板“1”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头1”为下，显示其面板，
if 选中状态于 This == false
隐藏动态面板“1”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头1”为上，显示其面板
（2）矩形“2”交互设置
点击矩形“2”对其“鼠标点击时“设置选中状态为”toggle“,
“选中改变时”设置
if 选中状态于 This == true
显示动态面板“2”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头2”为下，显示其面板，
if 选中状态于 This == false
隐藏动态面板“2”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头2”为上，显示其面板
（3）矩形“3”交互设置
点击矩形“3”对其“鼠标点击时“设置选中状态为”toggle“,
“选中改变时”设置
if 选中状态于 This == true
显示动态面板“3”，动画为向下滑动，时间为100ms，更多选项为推动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头3”为下，显示其面板，
if 选中状态于 This == false
隐藏动态面板“3”，动画为向上滑动，时间为100ms，拉动元件，方向为下方，动画为线性，时间为100ms
设置动态面板“箭头3”为上，显示其面板
下载地址：https://download.csdn.net/download/weixin_43516258/88998795
