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

效果如下：

步驟如下：

（1）準(zhǔn)備一二級(jí)菜單

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

（2）添加事件

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

• 事件1：?jiǎn)螕魰r(shí)針對(duì)當(dāng)前元件切換選中狀態(tài)；
• 事件2：選中時(shí)顯示2ndPannel；
• 事件3：取消選中時(shí)隱藏2ndPannel。

（3）設(shè)定組合

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

走到這一步，基本上就實(shí)現(xiàn)了點(diǎn)擊一級(jí)菜單出現(xiàn)二級(jí)菜單，點(diǎn)擊別的一級(jí)菜單收起之前展開(kāi)的二級(jí)菜單這樣的效果，但是動(dòng)畫是沒(méi)有的，不需要?jiǎng)赢嬀偷酱私Y(jié)束了。

（4）添加動(dòng)畫效果

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

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

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

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