系統中常常會有多級目錄，這里簡單介紹一下常常使用到的手風琴的菜單，本文用到的知識點主要是對中繼器的篩選和動態面板的尺寸及移動。

預覽：

一、元件準備

1、矩形框一個。這里先準備一個，等到用例完成了之后，想要幾個就直接復制就好了。目的是充當一級菜單吧，命名為“1”，這里一定要注意名字哦，后面會用到的；

2、動態面板一個。目的是顯示二級菜單用的。這里就命名為“二級菜單”設置成隱藏，動態面板設置成“自動調整為內容尺寸”即可；

3、中繼器一個。目的是存放二級菜單用的，名字也叫“二級菜單”吧，中繼器有兩個字段name和fid，并且把它放到動態面板里面，中繼器里面默認是有一個矩形框的，就用它來顯示中繼器的內容吧；

二、添加用例

1、“1”矩形框添加用例。點擊“1”時有兩種情況：一是“1”下面的二級菜單已經顯示出來了；二是“1”下面的二級菜單未顯示。

（1）已顯示出二級菜單，我們根據“1”和“二級菜單”動態面板的屬性來判斷。如果“1”的底邊坐標和“二級菜單”動態面板的頂邊坐標相同，并且“二級菜單”動態面板的可見性為true的話，那么我們在點擊“1”的時候要把二級菜單隱藏掉；

（2）“1”下面未顯示二級菜單。這種情況說明，二級菜單要么是隱藏狀態，要么是在別的一級菜單下面(目前只有“1”這么一個一級菜單)。

①綜合考慮來看，首先我們要先把二級菜單隱藏掉(就算是已經隱藏的了，再隱藏一下又何妨呢)；

②從中繼器中篩選是“1”下的二級菜單，在篩選前記得一定要清楚之前的篩選，不然就會有麻煩的；

③設置“二級菜單”動態面板尺寸。讓“二級菜單”動態面板的高度等于滿足條件的中繼器數據的高度和。至于這里為什么是乘以40的，因為中繼器里面的矩形框的高度我設置的是40 ^_^；

④移動“二級菜單”動態面板。因為如果有多個一級菜單的話，“二級菜單”可能不在你要點擊的一級菜單下面，所以需要要把“二級菜單”動態面板移動到，你點擊的一級菜單下面來；

X：

Y：

⑤把“二級菜單”面板顯示出來，到這里已經完成“1”下面的“二級菜單”的所有用例了；

（3）添加更多的一級菜單。添加與“1”同級別的菜單。直接復制“1”然后把名字改一下就可以了；我這里復制了兩個一級菜單，名字分別為“2”和“3”。如果你需要更多個，那么就一直Ctrl+v下去吧；

（4）添加“二級菜單”。在“二級菜單”中繼器中添加內容；

name：二級菜單的名字；

fid：一級菜單的名字(這里要注意是一級菜單的名字，而不是一級菜單的文本內容)；

（5）最后還差一步，不要忘記了，那就是設置中繼器的“每項加載時”用例。把name的值通過中繼器中的矩形框展示出來就可以了；

三、預覽

大功告成！F5走起~

PS：這個手風琴菜單的優勢就是，一次編輯用例，直接復制即可，而且只需要在中繼器中操作二級菜單即可，方便快捷。

如果大家有什么想要做的小功能或案例的話，可以留言告訴我，閑暇時可以一起探討~

本文由 @無淚?原創發布于人人都是產品經理。未經許可，禁止轉載。