編輯導語：在很多產品中都有下拉菜單的功能，但一些下拉菜單的功能比較笨重，不夠靈活；本文作者分享了一個高級教程，用中繼器做下拉菜單，我們一起來學習一下。
今天和大家分享一箇中繼器的高級教程——用中繼器來做下拉菜單。
一、為什麼要用中繼器做下拉菜單開始教學之前，我們先來探討一下為什麼要用中繼器來做下拉菜單。
首先，市面上的下拉菜單的教程都是用動態面板來做的，通過隱藏的拉動和顯示的推動來實現菜單效果的；這樣做看是沒有問題，但是用起來非常不方便。
為什麼呢？
- 動態面板做的相當於寫死了，你有10個菜單，你就要用10個矩形來畫10次；
- 如果想改變菜單的尺寸、顏色等樣式，那就需要改10次；
- 設置菜單跳轉交互，需要設置10次，而且還要到不同的動態面板，非常麻煩；這樣導致浪費了很多的時間，導致製作出來的元件複用性低。
所以作者就用中繼器做了一個下拉菜單原型，只需要填寫中繼器表格即可自動生成交互，而且修改尺寸尺寸樣式也只需要修改一次；非常的方便快捷，做好之後複用性極強，所以強烈推薦給大家使用。
二、原型效果預覽下面是做好的下拉菜單的效果，你們也可以自行體驗哈。
原型演示地址：https://lbligu.axshare.com/#g=1
中繼器×1，圖片元件×1，右箭頭x1，矩形×1，內聯框架×1。
中繼器內元件如下圖擺放，組成一個組合
四、中繼器表格設置picture代表中繼器前面的圖標，如有需要，右鍵導入圖片即可。
menu1代表該行菜單的一級菜單（一級菜單的menu1和menu2的值是一樣的）。
menu2代表二級菜單（本教程以二級菜單為案例，如需要二級以上的可以用同樣的思路來製作）。
you代表右箭頭，我們如果有下拉菜單，填寫1，如果沒有為空即可。下面我們會詳細介紹該交互。
xianshi代表該菜單是否顯示，1代表顯示，如果不默認顯示則為空，一級菜單必須要為1。
true：是否選中該矩形，我們需要先給矩形選中時一個顏色。
url：代表跳轉鼠標單擊時跳轉的頁面，右鍵導入頁面即可。
設置文本：讓矩形文本=item.menu2。
如果右不等於1，我們就隱藏右箭頭。
如果圖片為空，隱藏圖片；否則，設置圖片的值為item.picture。
如果顯示不等於1，隱藏整個菜單組合。
如果true=1，選中矩形。
這裏需要分兩種情況：
第一種情況是you==1，這種代表該菜單有子菜單，所以我們需要將子菜單顯示出來。
這裏我們需要先將其他子菜單先隱藏，如果菜單少的話可以不做這不操作；不過作者做過的項目基本都是這個邏輯，所以首先要更新行，條件是you不等於1，將這些菜單的item.xian設為0，這樣相當於將所有子菜單隱藏。
然後在更新行，和單擊菜單同一個menu1的item.xian設為1，這樣單擊菜單的所有子菜單都會顯示出來。
第二種情況就是you不等於1，這是代表沒有下級菜單了，所有我們就在內聯框架打開url對應的頁面即可。
這裏為了更加美觀，我們會設置該菜單為選中變色；所以用更新行的操作，首先將全部行的true更新為0，再更新該行菜單的true值為0即可。
以上就是本期分享的全部內容，謝謝閲讀。
本文由 @做產品但不是經理 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。