原生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樱释 ღ( ´･ᴗ･` )