Axure RP9：使用中继器制作折叠菜单

一、菜单效果

效果图

二、实现思路

  菜单为二级菜单，样式如下图：

菜单样式

  “一级菜单”的样式相对于“二级菜单”多了两个图标（首页、右侧箭头），所以我们通过中继器设置菜单时，还需要根据菜单级别做样式判断。
  点击“一级菜单”时，需要对“一级菜单”下的所有“二级菜单”进行隐藏，所以还需要判断菜单的隐藏与展示。
  综上所述，设计中继器表格如下：

中继器data

1. name：菜单展示内容。
2. type：“一级菜单”为1，“二级菜单”为2。
3. state：“二级菜单”显示为0，隐藏为1；“一级菜单”展开为0，折叠为1。
4. group：分组，为了区分“二级菜单”属于哪个“一级菜单”。

三、实现步骤

  首先我们添加中继器，之后修改样式如下：

中继器

  之后点击中继器，并增加交互“Item Loaded”，如下图：

image.png

1. Case 1：如果是1级菜单，则赋值name和显示两个图标。
2. Case 2：如果是2级菜单并且为显示状态，则赋值name，隐藏两个图标并且展示二级菜单。
3. Case 3：如果是2级菜单并未隐藏状态，则隐藏二级菜单。

  至此，我们的菜单展示效果就做好了，如下图：

菜单展示

  接下来，我们做二级菜单的选中效果，首先需要在“中继器”交互面板中勾选“Isolate Radio Groups”，如下图：

勾选Isolate Radio Groups

之后，设置二级菜单的选中效果，如下图：

二级菜单选中效果

再设置菜单的点击交互事件，如下图

菜单点击交互事件

1. Case 1：如果点击的是“二级菜单”，则“选中效果”为“true”。

  至此，二级菜单选中效果设置完毕。
  最后，我们设置“一级菜单”的点击效果，也就是点击后，将隐藏该“一级菜单”下的所有“二级菜单”。

2. Case 2：如果点击的是“一级菜单”，并且一级菜单处于展开状态，则将本组下的“二级菜单”都隐藏，然后更新“一级菜单”的状态为折叠。
3. Case 3：如果点击的是“一级菜单”，并且一级菜单处于折叠状态，则将本组下的“二级菜单”都展示，然后更新“一级菜单”的状态为展示。

  ok，大功告成，可以将菜单设置为模块模版，方便在各个页面中使用。同时如果需要打开链接，可以在菜单的点击事件中增加打开链接事件。后续改变菜单项可以在中继器的Data中配置，十分方便、高效。