Axure之折叠窗效果_微软公司|微软|Office|收费|规则

编辑导语：折叠窗效果是产品的一个基础功能，那么如何用Axure制作呢？本文仔细介绍了通过Axure RP9实现折叠窗效果的详细步骤和注意事项，希望对读者有所帮助。

文章插图
1、假设做三个标题和三个标题的子内容
2、先做三个标题的面板，三个子内容面板
三个标题面板：A1，B1，C1
三个子内容面板：a1，b1，c1
3、设置标题面板和子内容面板的尺寸
标题面板：700,50
子内容面板：700,350
4、将标题面板和子内容面板按照顺序从坐标（0,0）位置排列好
A1，a1，B1，b1，C1，c1
4.1 给A1增加两个状态：展开和折叠，默认展开
4.2 给B1增加两个状态：展开和折叠，默认展开
4.3 给C1增加两个状态：展开和折叠，默认展开
如下图所示：

文章插图
5、添加事件（只需给A1，B1，C1添加事件即可）
5.1 给A1添加事件（把产能标题面板看做A1，产能分析面板看做a1）

文章插图
总结：第一个面板的事件主要是单击事件，包含两种情景：每个情景包含设置标题面板A1的状态、设置子内容面板显示/隐藏、移动下一个标题面板B1
5.2 给B1添加事件（把业务标题面板看做B1，业务分析面板看做b1）（把订单标题面板看做C1，订单分析面板看做c1）

文章插图
总结：第二个面板（中间）的事件主要是单击事件、移动事件，单击事件包含两种情景：每个情景包含设置标题面板B1的状态、设置子内容面板显示/隐藏、移动下一个标题面板C1，移动事件是设置b1和C1跟随B1的移动而移动。
备注：如果中间还有面板，添加事件跟B1类似，类比添加即可
5.3 给C1添加事件（把发货标题面板看做C1，发货分析面板看做c1）

文章插图
总结：第二个面板（最后）的事件主要是单击事件、移动事件，单击事件包含两种情景：每个情景包含设置标题面板B1的状态、设置子内容面板显示/隐藏，移动事件是设置c1跟随C1的移动而移动。
本文由 @不器原创发布于人人都是产品经理，未经许可，禁止转载
【 Axure之折叠窗效果】题图来自 Unsplash，基于CC0协议

Axure之折叠窗效果

推荐阅读

如何找寻自我

缝纫机调线器怎么安装平车方法如何

强组词强字组词

火笋鸡翅的做法（增肥食谱）

闺女生日快乐祝福语朋友圈

LV请来潮牌设计师做艺术总监，看中的是啥

老虎豆怎么做好吃老虎豆图片怎样弄来吃

暖气有流水声是什么原因

皮球是什么体

手机怎样开通QQ空间

男生发mua说明 mua是什么意思

手指盖凹陷怎么回事

对自己的生活失去掌控咋调整

小米10s怎么没有月亮模式

我想找个偏僻的地方搞养殖！有没有推荐的地方？

南京养老金认证上门服务怎么申请南京市养老金认证

如何评价猪场阉割猪？

最后一个字是豹的成语

泰山散酒怎么样

猫发情的声音(猫发情的叫声)