手风琴

1.样式：

<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>

2.结构

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

3.事件

<script>
      var menu = [
        { name: "菜单1", childern: ["商品1", "商品2", "商品3", "商品4"] },
        { name: "菜单2", childern: ["商品1", "商品2", "商品3", "商品4"] },
        { name: "菜单3", childern: ["商品1", "商品2", "商品3", "商品4"] },
        { name: "菜单4", childern: ["商品1", "商品2", "商品3", "商品4"] },
      ];
      //   根据menu数组的长度在ul.menu中添加一定数量的li
      var menu1 = document.getElementsByClassName("menu")[0];
      for (var i = 0; i < menu.length; i++) {
        //   创建一个li
        var li = document.createElement("LI");
        li.innerHTML = `<span class='title'>${menu[i].name}</span>`;
        menu1.appendChild(li);
        // 创建ul且在ul中创建一定数量的li   取决于menu[i].children.length
        var ulChild = document.createElement("UL");
        // 循环遍历children， 创建li
        for (var j = 0; j < menu[i].childern.length; j++) {
          var liChild = document.createElement("LI");
          // 相信添加li中添加内容
          liChild.innerHTML = menu[i].childern[j];
          // 将每个li追加到li中
          ulChild.appendChild(liChild);
        }
        // 将子菜单ul追加到li中
        li.appendChild(ulChild);
      }
      //   给每一个span  菜单按钮绑定点击时间   事件委托
      menu1.onclick = function (e) {
        if (e.target.nodeName == "SPAN") {
          //   如果点击菜单按钮，就做显示隐藏操作
          var style = getComputedStyle(e.target.nextElementSibling);
          if (style.display == "block") {
            e.target.nextElementSibling.style.display = "none";
          } else {
            e.target.nextElementSibling.style.display = "block";
          }
        }
      };
    </script>