Axure8,设置展示折叠功能

时间:2024-10-24 11:14:13

1、先添加2个点击区域,组合后命名为a和b。包括点击图标的展开和折叠内容。

Axure8,设置展示折叠功能
Axure8,设置展示折叠功能

2、使用向下和向上的图标来实现点击事件,命名好图标为上和下

Axure8,设置展示折叠功能

3、再添加2个展示区域,组合后命名为a-1和b-1。

Axure8,设置展示折叠功能
Axure8,设置展示折叠功能

4、并设置好4个组件的默认位置,a和b之间设置好合适的间距,a-1和b-1紧跟在a和b组件。

Axure8,设置展示折叠功能

5、因为了控制点击永远只显示一个展示区域,所以用到一个全局变量。打开事件编辑,点击添加全局变量,设置好变量名,并进行赋值表示初始状态。设置的变量为:_OnclickJiancha,赋值为1

Axure8,设置展示折叠功能
Axure8,设置展示折叠功能

6、开始设置每一个的点击事件,先从a中的向下图标开始,点击展开a-1,并隐藏向下图标,显示向上图标 。同时,还要设置b向下移动的距离。如果b-1展开,要隐藏掉;

Axure8,设置展示折叠功能

7、再设置a中向上图标事件,隐藏展开区域,设置变量为0

Axure8,设置展示折叠功能

8、完成a的设置,进行b的设置,类似的操作,先设置向下展开的事件;此时要根据变量来判断是否要对a进行隐藏,所以有2个事件,以变量为条件,添加IF条件。

Axure8,设置展示折叠功能

9、设置向上图标事件,为隐藏b-1

Axure8,设置展示折叠功能

10、我们来看看具体实现的效果。

Axure8,设置展示折叠功能
© 手抄报圈