1、HTML

<div id="menuBox"></div>

2、JavaScript

mainInit();

// 数据处理
// 扁平数组结构转换成JSON树形结构
function mainInit() {
    
    
    // 源数据
    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