編輯導語：在很多產品中都有下拉選單的功能，但一些下拉選單的功能比較笨重，不夠靈活；本文作者分享了一個高階教程，用中繼器做下拉選單，我們一起來學習一下。
今天和大家分享一箇中繼器的高階教程——用中繼器來做下拉選單。
一、為什麼要用中繼器做下拉選單開始教學之前，我們先來探討一下為什麼要用中繼器來做下拉選單。
首先，市面上的下拉選單的教程都是用動態面板來做的，透過隱藏的拉動和顯示的推動來實現選單效果的；這樣做看是沒有問題，但是用起來非常不方便。
為什麼呢？
- 動態面板做的相當於寫死了，你有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協議。