原生JavaScript+HTML5实现树形目录结构、一维数组生成多维数组、无限、details、summary

1、HTML

<div id="menuBox"> // 源数据 let data = [ { id: 5, parentId: 2, name: "目录1-1-1", }, { id: 1, parentId: 0, name: "目录1", }, { id: 13, parentId: 9, name: "目录2-2-3", }, { id: 3, parentId: 1, name: "目录1-2", }, { id: 2, parentId: 1, name: "目录1-1", }, { id: 12, parentId: 9, name: "目录2-2-2", }, { id: 4, parentId: 1, name: "目录1-3", }, { id: 7, parentId: 0, name: "目录2", }, { id: 9, parentId: 7, name: "目录2-2", }, { id: 6, parentId: 2, name: "目录1-1-2", }, { id: 11, parentId: 9, name: "目录2-2-1", }, { id: 8, parentId: 7, name: "目录2-1", }, { id: 10, parentId: 7, name: "目录2-3", }, ]; // 构造一个新对象 // 对象的属性名是id值 // 对象的属性值是数组对应项的值 let map = {}; data.forEach(item => { map[item.id] = item; }); const result = []; data.forEach(item => { const parent = map[item.parentId]; if (parent) { // 如果有children则push数据到children中 // 如果没有就新建一个空的children数组 // 然后再push数据 parent.children = parent.children || []; parent.children.push(item); } else { // 在本例中 // else只会进入两次 // 也是最外层目录 result.push(item); } }); const root = document.getElementById('menuBox'); createMenu(result, root); } // 生成标签元素 function createMenu(data, root) { if (!data.length) throw new Error('出错啦'); data.forEach(item => { const detailsEle = document.createElement('details'); const summaryEle = document.createElement('summary'); const span = document.createElement('span'); span.innerHTML = item.name; summaryEle.appendChild(span); detailsEle.appendChild(summaryEle); root.appendChild(detailsEle); if (item.children?.length) createMenu(item.children, detailsEle); }); } 

3、CSS

null