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、觉得不错的话，请投个票，加个赞哦~
