JS實(shí)現(xiàn)多級(jí)菜單欄的代碼示例

需求分析

簡(jiǎn)單的分析一下，要實(shí)現(xiàn)N級(jí)菜單，首先從布局入手，即判斷是否有下級(jí)菜單

1.沒(méi)有下一級(jí)菜單,直接排列

2.有下級(jí)菜單，又分為下級(jí)菜單排放位置，和在上級(jí)菜單顯示類似 '>' 的符號(hào)，效果如圖:

圖：1

初步實(shí)現(xiàn)

1.實(shí)現(xiàn)是否存在 >

注意： 下面凡是擔(dān)憂 xxx===yyy ? xxx : xxx都是利用三元表達(dá)式，來(lái)表達(dá)思路。

ＨＴＭＬ結(jié)構(gòu)如下：

圖：2

?要實(shí)現(xiàn)圖一的效果，我們只需要判斷l(xiāng)i標(biāo)簽里面的children.length===2 ? 'span存在' : 'span移除'

2.下級(jí)菜單出現(xiàn)位置

ＨＴＭＬ結(jié)構(gòu)如下：

?實(shí)現(xiàn)這一需求，也需要判斷children.length===2 ? '上級(jí)菜單相對(duì)定位, top為0，left為上級(jí)的offsetWidth，下級(jí)菜單絕對(duì)定位' : '不做任何處理'

具體代碼即實(shí)現(xiàn)

效果圖如下：

代碼如下：

【相關(guān)推薦】

1. Javacript免費(fèi)視頻教程

2. JS制作QQ聊天消息展示和評(píng)論提交功能的代碼示例

3. 單行 JS 實(shí)現(xiàn)移動(dòng)端金錢(qián)格式檢驗(yàn)

4. JavaScript表單驗(yàn)證實(shí)現(xiàn)代碼_javascript技巧

5. Nodejs中常用中間件body-parser的實(shí)例詳解

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com