用原生js写手风琴的效果，伸缩框，简单易懂，有注释！

本文链接：https://blog.csdn.net/qq_44890362/article/details/119747599

这篇博客通过JavaScript展示了如何创建一个动态菜单，当点击菜单项时，其子菜单会进行展开或折叠。代码中使用了事件委托来处理点击事件，实现了菜单的显示和隐藏功能。此外，还提供了基础的HTML结构和数据模型，方便读者自行调整样式。

摘要由CSDN通过智能技术生成

1.大家可以看到这四个菜单栏，是先收起来的，点击它们的时候，它们就会展开。菜单的样式我就不设置了，大家可以自己去设置，这里先给大家看下js源码。

<body>
    <div class="wrap" id="wrap">
        <ul class="menu">
        
        </ul>
    </div>

    <script>
        var menu = [{
                name: "菜单一",
                children: ["商品一", "商品二", "商品三", "商品四"]
            },
            {
                name: "菜单二",
                children: ["商品一", "商品二", "商品三", "商品四"]
            }, {
                name: "菜单三",
                children: ["商品一", "商品二", "商品三", "商品四"]
            }, {
                name: "菜单四",
                children: ["商品一", "商品二", "商品三", "商品四"]
            }
        ];
        // 1.获取ul元素对象 
        var ul = document.querySelector('.menu');
        //    2.利用for循环，创建li,并将其添加到ul中
        for (var i = 0; i < menu.length; i++) {
            var li = document.createElement('LI');
            // 3.将span和二级菜单添加到li中
            li.innerHTML = `<span class = "title">${menu[i].name}</span>`;
            ul.appendChild(li);
            // 新建一个ul对象,二级菜单
            var ulChild = document.createElement('UL');
            for (var j = 0; j < menu[i].children.length; j++) {
                var ulLI = document.createElement('LI');
                // 5.将children中的商品添加到二级菜单li中
                ulLI.innerHTML = menu[i].children[j];
                // 在二级菜单中加入ulLI
                ulChild.appendChild(ulLI);
            }
            // 4.将二级菜单添加到li中
            li.appendChild(ulChild);
        }
        // 6.点击span菜单，隐藏二级菜单，使用事件委托的方式
        ul.addEventListener('click', function (e) {
            if (e.target.nodeName === 'SPAN') {
                //定义一个属性，得到样式的对象
                var style = window.getComputedStyle(e.target.nextElementSibling);
                // var style = getComputedStyle(ul);
                console.log(style);
                // 7.判断下一个兄弟元素ul的display属性是否是block
                if( style.display === 'block'){
                    // 如果显示就把它隐藏，如果没有显示，就让他显示
                    e.target.nextElementSibling.style.display = 'none';
                    // 给span添加一个样式
                    e.target.classList.add('dis');
                }else{
                    e.target.nextElementSibling.style.display = 'block';
                    // 给span删除样式
                    e.target.classList.remove('dis');
                }
            }
        });
    </script>
</body>