原生JS封装创建多级菜单函数

佚名 5年前 (2019-04-25) 随笔 420人围观抢沙发百度已收录

　　手写一个使用原生JS封装的多级菜单的函数，满足以下几点需求。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

子类层级不确定，可根据数据自动生成多级菜单。
操作便捷，只需传入一个HTML标签。

　　缺点：

需要满足特定的数据结构

　　废话不多说，展示代码。先展示数据代码，注意，使用此封装函数需要满足此数据结构。

var data = [{
        id: 1,
        address: "安徽",
        parent_id: 0
      },
      {
        id: 2,
        address: "江苏",
        parent_id: 0
      },
      {
        id: 3,
        address: "合肥",
        parent_id: 1
      },
      {
        id: 4,
        address: "庐阳区",
        parent_id: 3
      },
      {
        id: 5,
        address: "大杨镇",
        parent_id: 4
      },
      {
        id: 6,
        address: "南京",
        parent_id: 2
      },
      {
        id: 7,
        address: "玄武区",
        parent_id: 6
      },
      {
        id: 8,
        address: "梅园新村街道",
        parent_id: 7
      },
      {
        id: 9,
        address: "上海",
        parent_id: 0
      },
      {
        id: 10,
        address: "黄浦区",
        parent_id: 9
      },
      {
        id: 11,
        address: "外滩",
        parent_id: 10
      },
      {
        id: 12,
        address: "安庆",
        parent_id: 1
      }
    ];

　　然后是HTML代码，提供一个DOM调用函数。

<div id="menu"></div>

　　然后，就是我们封装的函数啦

  function ShowMenu(d) {
      var root = document.querySelector(d); //获取DOM节点
      var rootList = data.filter(rootItem => rootItem.parent_id == 0); //获取子元素数组
      rootList.forEach(rootItem => { //循环子元素数组
        var oDiv = document.createElement('div');
        oDiv.setAttribute('data-id', rootItem.id);
        oDiv.innerHTML = `${rootItem.address}`;

        function haschild(t) { //创建一个函数判断是否存在子元素
          var child = data.filter(s => s.parent_id == t.dataset.id); //获取子元素数组
          child.forEach(gs => { //循环子元素数组
            var oUl = document.createElement('ul');
            oUl.setAttribute('data-id', gs.id);
            var oLi = document.createElement('li');
            oLi.innerText = gs.address;
            oUl.appendChild(oLi);
            t.appendChild(oUl);
            haschild(oUl); //再次调用函数,直到没有子元素存在
          })
        }
        haschild(oDiv); //调用函数
        root.appendChild(oDiv); //把所有的DOM放入传进来的DOM节点
      })
    }