上一篇文章寫的拖動列表，里面用了一些公式計算有朋友說有點復雜了，今天做一個二級折疊菜單，個人認為算是我看到的所有文章里步驟最簡單的實現(xiàn)辦法了，如有更簡單的歡迎交流討論~

效果如下：

步驟如下：

（1）準備一二級菜單

畫4個矩形，填充一些顏色和文字加以標記，如下圖。然后選中二級菜單的三個矩形框（1.1-1.2-1.3）轉動態(tài)面板命名“2ndPannel”并隱藏，不再附圖。

（2）添加事件

為矩形框“一級菜單”添加3個事件，分別如下圖。然后將矩形框“一級菜單”和2ndPannel一起選中復制2份擺放好，更改一下文字內容，不再附圖。

• 事件1：單擊時針對當前元件切換選中狀態(tài)；
• 事件2：選中時顯示2ndPannel；
• 事件3：取消選中時隱藏2ndPannel。

（3）設定組合

這是最簡單卻又是很重要的一步，選中三個矩形框“一級菜單”組合（Ctrl+G）并設置選項組名稱“1st”，這時要注意了，有兩個輸入框的標題同樣都是“設置選項組名稱：”，第一個輸入名字是不能實現(xiàn)我們需求的的，需要拉到底在最后那個輸入名字才行，你可以試試看驗證一下。

走到這一步，基本上就實現(xiàn)了點擊一級菜單出現(xiàn)二級菜單，點擊別的一級菜單收起之前展開的二級菜單這樣的效果，但是動畫是沒有的，不需要動畫就到此結束了。

（4）添加動畫效果

需要回退到第二步修改里面的事件2、事件3，如下圖。要說明的是顯示之前一定要有個等待，時長與顯示動畫時長一樣，不添加等待會有大片空白出現(xiàn)，你可以試試看驗證一下。

二級折疊菜單，你試試看一分鐘能否搞定。

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

題圖來自Unsplash，基于CC0協(xié)議