原生js做树形菜单（详细注释+加简易版）

<div class="epiboly"></div>

body {
    background-color: #5e7987;
}
.epiboly {
    width: 50%;
    margin-left: 25%;
}
.structure {
    list-style: none;
    border: 0.1px solid #000;
    background-color: rgb(0, 300, 190);
}
.epiboly ul li {
    margin-top: 10px;
    display: flex;
    border-bottom: 0.1px solid;
}
.structure>div {
    margin-top: 10px;
    border-bottom: 0.1px solid #000;
}
.epiboly ul {
    list-style: none;
}
ul img {
    width: 16px;
    height: 16px;
}

// 请求过来数据
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/sxcd.json', true);
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let text = xhr.responseText;
        let data = JSON.parse(text);
        show(data);
    }
};
// 获取到渲染地方
let epiboly = document.getElementsByClassName('epiboly')[0];
// 生成一个用于拼接的空数组
let str = '';
// 默认首个为头并加上状态
let statuss = true;
// 渲染函数
function show(data) {
    // 先判断他的状态为什么
    if (statuss) {
        // 确认为开头
        str += '<ul>';
    } else {
        // 确认为下属，隐藏
        str += '<ul style="display:none">';
    }
    // 循环数组的长度次数
    for (let i = 0; i < data.length; i++) {
         // 循环判断每次拼接后它有没有附属,有就加img
       if(data[i].fusu){
        // 每循环一次就拼接上内容
        str += '<p></p>'+'<li>' + data[i].name + '<img src="../img/向下.png">' + '</li>';
        // 有的话就改为false
        statuss = false;
        // 并重新调用函数传参
        show(data[i].fusu);
    }else{
        str += '<p></p>'+'<li>'+ data[i].name +'</li>';
       }
    }
    // 拼接上结尾标签
    str += '</ul>';
    epiboly.innerHTML = str;
    return str;
}
// 根据点击显示与隐藏
epiboly.addEventListener('click', function (e) {
    console.log(e)
    // 如果点击的那个元素，有下级元素，就展开  nextSibling 
    // nodeName属性获得它的名称,但是属性名是大写，即LI  UL    console.log(e.target.nodeName);  
    let a = e.target.nextSibling;
    // 判断是否有子元素
    if (e.target.nextSibling != null) {
        // 确认获取到的是点击的那个li标签
        console.log(e.target.nextSibling);
        if (e.target.nodeName == 'LI' && a.nodeName == 'UL') {
            // 判断是否处于none
            if (a.style.display == "none") {
               a.style.display = "block";
            } else if (a.style.display == "block") {
                a.style.display = "none";
            }
        }
    }
})

[
    {
        "name": "昆虫",
        "fusu": [
            {
                "name": "带翅膀的",
                "fusu": [
                    {
                        "name": 100
                    },
                    {
                        "name": 200
                    },
                    {
                        "name": 300
                    }
                ]
            },
            {
                "name": "不带翅膀的"
            },
            {
                "name": "会游泳的",
                "fusu": [
                    {
                        "name": "10分钟"
                    },
                    {
                        "name": "20分钟"
                    },
                    {
                        "name": "一辈子"
                    }
                ]
            },
            {
                "name": "不会游泳的"
            }
        ]
    },
    {
        "name": "动物",
        "fusu": [
            {
                "name": "两只",
                "fusu": [
                    {
                        "name": "10千米/小时"
                    },
                    {
                        "name": "20千米/小时"
                    },
                    {
                        "name": "30千米/小时"
                    },
                    {
                        "name": "100千米/小时"
                    }
                ]
            },
            {
                "name": "四只",
                "fusu": [
                    {
                        "name": "10千米/小时"
                    },
                    {
                        "name": "20千米/小时"
                    },
                    {
                        "name": "30千米/小时"
                    },
                    {
                        "name": "100千米/小时"
                    }
                ]
            }
        ]
    }
]