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

原生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节点
})
}

  当当当当,又到了最振奋人心的时刻啦!调用函数。

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

结束,别看了老铁,没了

上一篇:python selenium中使用ddt进行数据驱动测试


下一篇:NSURLSession与NSURLConnection区别