原生JS封裝創建多級菜單函數

　　手寫一個使用原生JS封裝的多級菜單的函數，滿足以下幾點需求。

• 子類層級不確定，可根據數據自動生成多級菜單。
• 操作便捷，只需傳入一個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節點
      })
    }    

　　當當當當，又到了最振奮人心的時刻啦！調用函數。

結束,別看了老鐵,沒了