js初级，菜单栏的展开与收缩

js初级，菜单栏的展开与收缩

点击菜单分类选项，展开或关闭菜单的子选项。

<style>
        ul {
            margin: 0;
            list-style: none;
            padding: 0;
        }
        
        .wrap {
            width: 200px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 2;
        }
        
        .title {
            background: rgb(236, 135, 52);
            display: block;
            cursor: pointer;
        }
    </style>

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

        </ul>
    </div>

var menu = [{
            name: "菜单一",
            children: ["商品一", "商品二", "商品三", "商品四"]
        }, {
            name: "菜单二",
            children: ["商品一", "商品二", "商品三", "商品四"]
        }, {
            name: "菜单三",
            children: ["商品一", "商品二", "商品三", "商品四"]
        }, {
            name: "菜单四",
            children: ["商品一", "商品二", "商品三", "商品四"]
        }];
        // 获取ul
        var ul = document.getElementsByTagName('ul')[0];
        // 向ul添加li   菜单分类  标题 div
        for (var i = 0; i < menu.length; i++) {
            var li = document.createElement('li');
            li.innerHTML = '<div>' + menu[i].name + '</div>';
            ul.appendChild(li);
            li.firstElementChild.classList.add('title');
        }
        // 向菜单分类 li 里添加 商品栏 ul
        for (var i = 0; i < menu.length; i++) {
            var ulx = document.createElement('ul');
            ul.children[i].appendChild(ulx);
            ulx.style.backgroundColor = '#fff';
        }
        // 向商品栏 ul 添加 商品 li
        for (var i = 0; i < menu.length; i++) {
            for (var j = 0; j < menu[0].children.length; j++) {
                var li = document.createElement('li');
                li.innerHTML = menu[i].children[j];
                ul.children[i].children[1].appendChild(li);
            }
        }
        // 循环注册事件 ，点击关闭或打开菜单
        // for (var i = 0; i < menu.length; i++) {

        //     ul.children[i].firstElementChild.onclick = function() {
        //         if (this.nextElementSibling.style.display === 'none') {
        //             this.nextElementSibling.style.display = 'block';
        //         } else {
        //             this.nextElementSibling.style.display = 'none';
        //         }

        //     }
        // }

        // 打开一个菜单，关闭其他菜单
        for (var i = 0; i < menu.length; i++) {
            ul.children[i].firstElementChild.nextElementSibling.style.display = 	'none';
            ul.children[i].firstElementChild.onclick = function() {
                for (var j = 0; j < menu.length; j++) {
                    ul.children[j].firstElementChild.nextElementSibling.style.display= 'none';
                }
                this.nextElementSibling.style.display = 'block';
            }
        }
    </script>

只打开一个菜单的效果图：


所有菜单都可以打开关闭的效果图：