DOM：多级菜单联动

菜单联动

简单实现三级：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .box {
            width: 100px;
            /* height: 100px; */
            background-color: darkgrey;
            overflow: auto;
            float: left;
            border-right: 1px solid #222;
        }

        .c1,
        .c2,
        .c3 {
            background-color: gainsboro;
            width: 100px;
            height: 30px;
        }
    </style>
    <div class="box"></div>
    <script>

        var data = [{
            name: "动物",
            next: [{
                name: '猴',
                next: ["金丝猴", "长臂猿", "红猩猩"]
            }, {
                name: '熊猫',
                next: ["大熊猫", "小熊猫"]
            }, {
                name: '猫咪',
                next: ["田园猫", "宠物猫"]
            }]
        }, {
            name: "植物",
            next: [{
                name: '被子植物',
                next: ["蔷薇", "胡杨", "垂柳","无花果"]
            }, {
                name: '裸子植物',
                next: ["银杏", "红豆杉", "苏铁", "刺柏", "松树"]
            }]
        }, {
            name: "工具",
            next: [{
                name: '手工工具',
                next: ["扳手", "钳子", "锤子", "斧子", '剪刀', "卷尺"]
            }, {
                name: '电动工具',
                next: ["电钻", "砂磨机"]
            }, {
                name: '绘画工具',
                next: ["画板", "画纸", "画架", "画笔"]
            }]
        }]
        var box = document.querySelector('.box');
        for (let i = 0; i < data.length; i++) {
            console.log(data[i]);
            let c1 = document.createElement('div');
            c1.innerHTML = data[i].name
            c1.classList.add('c1');
            box.appendChild(c1);

            c1.onclick = function () {
                this.style.backgroundColor = 'gray'
                //清空
                let boxs = document.querySelectorAll('.box');
                boxs.forEach((el, index) => { if (index != 0) { el.remove() } })
                //创建下一列
                let box2 = document.createElement('div')
                box2.classList.add('box')
                document.body.appendChild(box2)

                //把当前数据的next数组属性中的所有数据添加到box2中
                for (let j = 0; j < data[i].next.length; j++) {
                    let c2 = document.createElement('div');
                    c2.innerHTML = data[i].next[j].name
                    c2.classList.add('c2');
                    box2.appendChild(c2);

                    c2.onclick = function () {
                        this.style.backgroundColor = 'gray'
                        //清空
                        let boxs = document.querySelectorAll('.box');
                        boxs.forEach((el, index) => { if (index>1) { el.remove() } })
                        //创建下一列
                        let box3 = document.createElement('div')
                        box3.classList.add('box')
                        document.body.appendChild(box3)

                        //把当前数据的next数组属性中的所有数据添加到box3中
                        for (let k = 0; k < data[i].next[j].next.length; k++) {
                            let c3 = document.createElement("div")
                            c3.className = "c3"
                            c3.innerHTML = data[i].next[j].next[k]
                            box3.appendChild(c3)
                            c3.onclick = function () {
                                this.style.background = "gray"
                                console.log(data[i].name + data[i].next[j].name, data[i].next[j].next[k])
                                let boxs = document.querySelectorAll('.box');
                                boxs.forEach((el, index) => { if (index>2) { el.remove() } })
                            }
                        }
                    }
                }
            }
        }
    </script>
</body>

</html>
效果图：

posted on 2022-07-22 22:49 香香鲲阅读(34) 评论(0) 收藏举报