原生js生成無限級樹形菜單

設計思路：

要生成菜單的源數據往往是一個樹形數據結構（若不是也可以轉換成樹形結構），(那我們一起寫博客吧)因為源數據結構和目標菜單結構都為樹形結構，所以其實我們要做的就是數據結構的轉譯，即將js樹形數據轉換為 ul, li 拼接成的樹形菜單。在這里我們通過樹的深度優先遍歷方式來完成這次轉義操作。

 

結構(轉義)映射關系說明：

迭代樹形數據時，樹形結構數據的每個同層級別的每條數據轉換成一個 LI標簽包裹的菜單項（添加class為menu-item標識），當遇到childrens項時，當前項數據用 LI 標簽包裹（添加class為menu標識），同時在該LI標簽后面添加UL標簽作為下一級菜單包裹項，迭代childrens作為上述UL標簽的子菜單項，對childrens子元素的操作同上述描述的操作。

簡單總結就是樹的每條數據都轉換為LI標簽內容，每個childrens都轉換為UL標簽。

 

以下我們來完成對上述描述代碼實現

1，js樹形數據

var menuList = [
    {
        name: '音程比較',
        childrens: [
            {
                name: '比較純音程',
            },
            {
                name: '比較不完全和協音程',
            },
            {
                name: '比較不協和音程',
                childrens: [
                    {
                        name: '大二度&小七度-上行',
                        intervalId: 112,
                        questionType: "bj",
                    },
                    {
                        name: '大二度&小七度-下行',
                        intervalId: 113,
                        questionType: "bj",
                    },
                ],
            },
            {
                name: '比較跨兩個八度的復合音程',
            }
        ]
    },
    {
        name: '音程辨認',
        childrens: [
            {
                name: '辨認小二度和大二度音程',
                childrens: [
                    {
                        name: '分辨小二度和大二度音程-上行',
                        intervalId: 1,
                        questionType: "br",
                    },
                    {
                        name: '分辨小二度和大二度音程-下行',
                        intervalId: 2,
                        questionType: "br",
                    },
                    {
                        name: '分辨小二度和大二度音程-和聲',
                        intervalId: 3,
                        questionType: "br",
                    },
                    {
                        name: '分辨小二度和大二度音程-上行下行',
                        intervalId: 4,
                        questionType: "br",
                    },
                    {
                        name: '分辨小二度和大二度音程-上行和聲',
                        intervalId: 5,
                        questionType: "br",
                    },
                    {
                        name: '分辨小二度和大二度音程-下行和聲',
                        intervalId: 6,
                        questionType: "br",
                    }
                ]
            },
            {
                name: '辨認小三度和大三度的音程',
                childrens: [
                    {
                        name: "分辨小三度和大三度音程-上行",
                        intervalId: 7,
                        questionType: "br",
                    },
                    {
                        name: "分辨小三度和大三度音程-下行",
                        intervalId: 8,
                        questionType: "br",
                    },
                    {
                        name: "分辨小三度和大三度音程-和聲",
                        intervalId: 9,
                        questionType: "br",
                    },
                    {
                        name: "分辨小三度和大三度音程-上行下行",
                        intervalId: 10,
                        questionType: "br",
                    },
                    {
                        name: "分辨小三度和大三度音程-上行和聲",
                        intervalId: 11,
                        questionType: "br",
                    },
                    {
                        name: "分辨小三度和大三度音程-下行和聲",
                        intervalId: 12,
                        questionType: "br",
                    }
                ]
            },
        ]
    },
]

2，迭代生成樹形菜單

        // 生成dom tree
        function generateDomTree(treeData, config = {
            label: 'name',
            childrens: 'childrens'
        }) {
            var label = config.label // 要顯示的字段名
            var childrensKey = config.childrens // 子節點字段名
            var container = generateDomEle('ul')
            /* 
             fragment 菜單容器
             menuList 待遍歷菜單
             show 展開菜單
            */
            function deep(fragment, menuList, show) {
                for (const menu of menuList) {
                    var liDom = generateDomEle('li', {
                        innerText: menu[label]
                    })
                    var childrens = menu[childrensKey]
                    // 子節點存在
                    if (childrens && childrens.length) {
                        fragment.appendChild(liDom) // 插入節點
                        var urlDom = generateDomEle('ul') // 生成下一級菜單
                        liDom.classList.add('menu') // 添加菜單標識
                        if (!show) {
                            // 關閉菜單
                            liDom.classList.add('close')
                        }
                        fragment.appendChild(urlDom)

                        deep(urlDom, childrens, show) // 迭代
                    } else {
                        liDom.classList.add('menu-item') // 添加菜單項標識
                        fragment.appendChild(liDom)
                    }
                }
            }
            deep(container, treeData, false)
            return container
        }

3，給菜單添加點擊展開關閉操作

        var container = generateDomTree(treeData)
        container.addEventListener('click', function (e) {
            var target = e.target
            // 點中 li
            if (target.tagName == 'LI') {
                // 點中菜單
                if (target.classList.contains('menu')) {
                    target.classList.toggle('close') // 如果關閉則展開，展開則關閉
                } else {
                    //做你想做的
                }
            }
        }, false)

4，相關代碼解釋說明

4-1，代碼中用到的自定義方法代碼片段

// 生成dom節點
function generateDomEle(tagName, property) {
    var property = property || {}
    var ele = document.createElement(tagName)
    for (var key in property) {
        ele[key] = property[key]
    }
    return ele
}

4-2，效果圖

4-3，生成的dom結構

 

 

 

 

@萍2櫻釋 ღ( ´･ᴗ･` )