JS實現多級菜單欄的代碼示例

需求分析

簡單的分析一下，要實現N級菜單，首先從布局入手，即判斷是否有下級菜單

1.沒有下一級菜單,直接排列

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

圖：1

初步實現

1.實現是否存在 >

注意： 下面凡是擔憂 xxx===yyy ? xxx : xxx都是利用三元表達式，來表達思路。

ＨＴＭＬ結構如下：

圖：2

?要實現圖一的效果，我們只需要判斷li標簽里面的children.length===2 ? 'span存在' : 'span移除'

2.下級菜單出現位置

ＨＴＭＬ結構如下：

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

具體代碼即實現

效果圖如下：

代碼如下：

【相關推薦】

1. Javacript免費視頻教程

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

3. 單行 JS 實現移動端金錢格式檢驗

4. JavaScript表單驗證實現代碼_javascript技巧

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com