一、菜单效果
效果图
二、实现思路
菜单为二级菜单，样式如下图：
菜单样式
“一级菜单”的样式相对于“二级菜单”多了两个图标（首页、右侧箭头），所以我们通过中继器设置菜单时，还需要根据菜单级别做样式判断。
点击“一级菜单”时，需要对“一级菜单”下的所有“二级菜单”进行隐藏，所以还需要判断菜单的隐藏与展示。
综上所述，设计中继器表格如下：
中继器data
- name：菜单展示内容。
- type：“一级菜单”为1，“二级菜单”为2。
- state：“二级菜单”显示为0，隐藏为1；“一级菜单”展开为0，折叠为1。
- group：分组，为了区分“二级菜单”属于哪个“一级菜单”。
三、实现步骤
首先我们添加中继器，之后修改样式如下：
中继器
之后点击中继器，并增加交互“Item Loaded”，如下图：
image.png
- Case 1：如果是1级菜单，则赋值name和显示两个图标。
- Case 2：如果是2级菜单并且为显示状态，则赋值name，隐藏两个图标并且展示二级菜单。
- Case 3：如果是2级菜单并未隐藏状态，则隐藏二级菜单。
至此，我们的菜单展示效果就做好了，如下图：
菜单展示
接下来，我们做二级菜单的选中效果，首先需要在“中继器”交互面板中勾选“Isolate Radio Groups”，如下图：
勾选Isolate Radio Groups
之后，设置二级菜单的选中效果，如下图：
二级菜单选中效果
再设置菜单的点击交互事件，如下图
菜单点击交互事件
- Case 1：如果点击的是“二级菜单”，则“选中效果”为“true”。
至此，二级菜单选中效果设置完毕。
最后，我们设置“一级菜单”的点击效果，也就是点击后，将隐藏该“一级菜单”下的所有“二级菜单”。
- Case 2：如果点击的是“一级菜单”，并且一级菜单处于展开状态，则将本组下的“二级菜单”都隐藏，然后更新“一级菜单”的状态为折叠。
- Case 3：如果点击的是“一级菜单”，并且一级菜单处于折叠状态，则将本组下的“二级菜单”都展示，然后更新“一级菜单”的状态为展示。
ok，大功告成，可以将菜单设置为模块模版，方便在各个页面中使用。同时如果需要打开链接，可以在菜单的点击事件中增加打开链接事件。后续改变菜单项可以在中继器的Data中配置，十分方便、高效。
