手写一个使用原生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节点 }) }
当当当当,又到了最振奋人心的时刻啦!调用函数。
结束,别看了老铁,没了