JS（简单的动态菜单）

如何实现自定义菜单呢~

<style>
.two {
    margin-left: 30px;
}
.three {
    margin-left: 60px;
}
</style>

<div id="box">
    
</div>


<script>
let arr = [
    {id:1, name: '零食', pid: 0, level: 1},
    {id:2, name: '生活用品', pid: 0, level: 1},
    {id:3, name: '攻城狮', pid: 0, level: 1},

    {id:4, name: '方便面', pid: 1, level: 2},
    {id:5, name: '汽水', pid: 1, level: 2},
    {id:6, name: '薯条', pid: 1, level: 2},
    
    {id:7, name: '床单', pid: 2, level: 2},
    {id:8, name: '枕头', pid: 2, level: 2},
    {id:9, name: '洗发水', pid: 2, level: 2},

    {id:10, name: 'WEB大前端', pid: 3, level: 2},
    {id:11, name: 'JAVA', pid: 3, level: 2},
    {id:12, name: 'PYTHON', pid: 3, level: 2},
    
    {id:13, name: 'JS变量', pid: 10, level: 3},
    {id:14, name: 'JS判断', pid: 10, level: 3},
    {id:15, name: 'JS循环', pid: 10, level: 3},
    
    {id:16, name: 'JAVA变量', pid: 11, level: 3},
    {id:17, name: 'JAVA判断', pid: 11, level: 3},
    {id:18, name: 'JAVA循环', pid: 11, level: 3},
]


function findById (id) 
{
    let child = [];
    arr.forEach((value) => {
        if (value.pid == id) {
        child.push(value);
        }
    });
    return child;
}
    
function getTree(id) 
{
    let dataArr = findById(id);
    if (dataArr.length <= 0) {
        return null;
    } else {
        dataArr.forEach((value) => {
            if (getTree(value.id) != null) {
                value["children"] = getTree(value.id);
            }
        });
    }
    return dataArr;
}

console.log(getTree(0));

let cates = getTree(0)


let cateHtml = ``

// 一维
cates.forEach((oneItem, index) => {

    console.log(oneItem.name) // 零食、生活用品、工程师
    cateHtml+=`<div class="one"><input type="text" value="${oneItem.name}" /></div>`

    // 二维
    if (oneItem.children)
    {
        oneItem.children.forEach((twoItem, index) => {

            console.log(twoItem.name)  // 二级名字
            cateHtml+=`<div class="two"><input type="text" value="${twoItem.name}" /></div>`

            // 三维
            if (twoItem.children)
            {
                twoItem.children.forEach((threeItem, index) => {
                    
                    // console.log(threeItem.name)  // 三级名字
                    cateHtml+=`<div class="three"><input type="text" value="${threeItem.name}" /></div>`

                })
            }
        })
    }
})

// 留心： appendChild 只能放createElement语法创建的标签
// 现在： innerHTML
document.querySelector('#box').innerHTML = cateHtml
</script>

效果