Axure制作：晋级自制树状图

1、新建1个”热区“，4个”复选框“及2个"向右"的图标

如图所示：

2、设置1个"图标：向右"为opened；尺寸：8*12；填充色：#CCCCCC；旋转：90度

设置1个"图标：向右"为closed；；尺寸：8*12；填充色：#CCCCCC；

设置4个复选框，分别为：option_A、option_1、option_2、option_3；内容为：树状图案例A、选项1、选项2、选项3

设置复选框：option_1、option_2、option_3，组合为”option_group“

3、按如下方式设置布局：

4、复选框勾选的交互可以参考以下链接，这里不在过多累述~

这里仅提供”option_A“的”选中时“和”option_1“的”取消选中时“的交互截图，以供参考

5、重点展开说下展开和收拢的交互效果~

6、”图标：closed“的”鼠标单击时“的动作：

---

显示”组合：option_group“：动画：向下滑动；置于顶层；推动元件：下方、线性；

显示：”图标：opened“

隐藏：”图标：closed“

---

7、”图标：opened“的”鼠标单击时“的动作：

---

隐藏”组合：option_group“：动画：向上滑动；拉动元件：下方、线性；

显示：”图标：closed“

隐藏：”图标：opened“

---

8、另复制几组（这里演示为3组），按如下图示布局放置~

按所需修改各项内容即可~

9、看下最后效果如何？

虽然这个方式简便、易学，但实际应用时也要考虑其他控件的布局，……呵呵

10、觉得不错的话，请投个票，加个赞哦~