编辑导语:很多产品都有下拉菜单的功能，但有些下拉菜单繁琐不灵活；这篇文章的作者分享了一个高级教程，使用中继器作为下拉菜单。大家一起了解一下。

今天我和大家分享一个中继器的高级教程——用中继器作为下拉菜单。

首先，为什么要使用中继器作为下拉菜单

在我们开始教学之前，让我们讨论一下为什么我们使用中继器作为下拉菜单。

首先，市面上下拉菜单的教程都是用动态面板做的，菜单效果是通过隐藏拉和显示推实现的；这样做没有问题，但是使用起来很不方便。

为什么？

动态面板做的相当于写死了，你有10个菜单，你就要用10个矩形来画10次；如果想改变菜单的尺寸、颜色等样式，那就需要改10次；设置菜单跳转交互，需要设置10次，而且还要到不同的动态面板，非常麻烦；这样导致浪费了很多的时间，导致制作出来的元件复用性低。

所以作者用repeater做了一个下拉菜单原型，只需要填写repeater表单自动生成交互，只需要修改一次大小样式；非常方便快捷，可重用性高，所以强烈推荐大家使用。

二、原型效果预览

下面是下拉菜单的效果。也可以自己体验一下。

原型演示地址:https://lbligu.axshare.com/

三、生产材料

中继器×1，像素×1，右箭头x1，矩形×1，内嵌框架×1。

中继器中的组件按如下所示排列以形成组合

四.中继器表设置

图片代表中继器前面的图标。如有必要，右键单击以导入图片。

Menu1代表这一行菜单的一级菜单(一级菜单的menu1和menu2的值相同)。

Menu2代表二级菜单(本教程以二级菜单为例，如果需要两级以上，可以用同样的思路制作)。

你代表右箭头。如果我们有下拉菜单，填1，如果没有，就是空。我们将在下面详细描述这种交互。

石现表示是否显示菜单，1表示显示，如果默认不显示，则为空，一级菜单必须为1。

真:无论是否选择矩形，我们都需要先为矩形选择一种颜色。

Url:指跳转鼠标点击时跳转的页面，右键导入页面。

动词 （verb的缩写）交互式设置

1.当中继器的每个项目被加载时，

设置文本:让矩形文本=item.menu2..

如果right不等于1，我们隐藏右箭头。

如果是空，隐藏图片；否则，将图片值设置为item.picture..

如果显示不等于1，隐藏整个菜单组合。

如果true=1，则选择矩形。

�������

2.当鼠标点击菜单组合时，

这里有两种情况:

第一种情况是you==1，这意味着菜单有子菜单，所以我们需要显示子菜单。

在这里，我们需要先隐藏其他子菜单。如果菜单很少，我们就不能这样做。但是作者做过的项目基本都是基于这个逻辑，所以应该先更新行，前提是you不等于1，这些菜单的item.xian设置为0，相当于隐藏了所有子菜单。

然后在更新行中，menu1的item.xian(与点击菜单相同)被设置为1，以便显示点击菜单的所有子菜单。

在第二种情况下，you不等于1，这意味着没有低级菜单，所以我们可以在内嵌框架中打开与url对应的页面。

这里为了更美观，我们会设置菜单选择变色；因此，在更新行的操作中，首先将所有行的真值更新为0，然后将该行菜单的真值更新为0。