三級菜單（甚至更多級菜單）在我們的各種產(chǎn)品中出現(xiàn)的頻率是比較高的，同樣，在問怎么做的小伙伴也特別多。這里就說一下三級菜單的做法吧。

先看看三級菜單的效果：https://8bf5ra.axshare.com/#c=2

說到三級菜單，我們就先來看看二級菜單怎么做。把二級菜單項(xiàng)都放在一個(gè)動態(tài)面板中，然后，點(diǎn)擊一級菜單時(shí)顯示這個(gè)動態(tài)面板，并帶有向下推動元件的效果。

三級菜單的做法要比二級的要稍微復(fù)雜一點(diǎn)，我們不能直接使用同樣的方法在二級菜單面板中再加三級菜單的面板，直接讓它顯示。三級菜單顯示時(shí)不能推動一級菜單往下，因?yàn)樵谖锢砩现v，它們已經(jīng)不在一個(gè)空間上了。

不能直接來，我們可以利用曲線救國的方法。怎么做？來看

?

二級菜單的展開和收起可以跟原來的一樣做，不同的是三級菜單展開和收起。既然一級菜單只能通過二級菜單的動態(tài)面板去推動，那我們就在這里想辦法，讓二級菜單在三級菜單展開之后再顯示，那這個(gè)時(shí)候就可把一級菜單往下推動了。那在點(diǎn)擊一級菜單的時(shí)候，二級菜單就已經(jīng)顯示出來了呀？怎么辦？就先讓它隱藏就可以了。

?

可能會有點(diǎn)不是太理解，沒關(guān)系，我們一起來看一下具體的設(shè)置方法

先把一二三級菜單做出來。（這里可以先分別只做一個(gè)選項(xiàng)：一二三級菜單分別只做一個(gè)）二級菜單用動態(tài)面板制作，在二級的面板中，在用動態(tài)面板制作三級的菜單，注意要進(jìn)行命名

所有動態(tài)面板都要選擇“自動調(diào)整為內(nèi)容尺寸”，確保動態(tài)面板會隨著展開的內(nèi)容而自動調(diào)節(jié)它的高度，這樣就能夠?qū)?nèi)容全部展示出來。

部件準(zhǔn)備好之后，就開始交互的設(shè)置了。在單擊“一級菜單”時(shí)，顯示或隱藏相對應(yīng)的二級菜單面板，并推動部件。二級菜單的展開和收起就設(shè)置好了。

?

接下來設(shè)置三級菜單的展開和收起，在前面說過不能直接設(shè)置顯示隱藏，要利用二級菜單的顯示隱藏來做。這里先把二級菜單隱藏，接著顯示三級菜單，最后讓二級菜單再一次顯示，并且推動其余的部件往下。

設(shè)置一個(gè)按鈕上面的交互，然后預(yù)覽看看，這時(shí)候會發(fā)現(xiàn)基本是對的，但是有一點(diǎn)，二三級菜單都狀態(tài)之后，點(diǎn)擊一級菜單會收起，再次點(diǎn)擊一級菜單，原來打開的二三級菜單還是展開的狀態(tài)

那回到一級菜單的單擊時(shí)事件，我們再做一次修改。點(diǎn)擊它的時(shí)候，只顯示或隱藏二級菜單就行了，三級菜單就將它隱藏。

這個(gè)時(shí)候再次預(yù)覽就沒有問題了。沒有問題之后我們將用例復(fù)制到其他的按鈕上然后進(jìn)行修改。

PS：如果你是每個(gè)元素分別只先制作了一份的話，這時(shí)候就將所有的按鈕和面板選中之后，直接復(fù)制幾個(gè)副本就可以了，還不用修改用例內(nèi)容，省事！

?這樣我們通過動態(tài)面板和簡單的動作結(jié)合使用就實(shí)現(xiàn)了三級菜單的制作。當(dāng)然，這只是一種方法，還會有其他的方法可以做到，如果你有其他的做法，歡迎一起交流。