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

預(yù)覽：

一、元件準(zhǔn)備

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

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

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

二、添加用例

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

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

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

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

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

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

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

X：

Y：

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

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

（4）添加“二級菜單”。在“二級菜單”中繼器中添加內(nèi)容；

name：二級菜單的名字；

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

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

三、預(yù)覽

大功告成！F5走起~

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

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

本文由 @無淚?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。