js实现树形菜单

ul{
                list-style: none;
            }
            div {
                user-select: none;
            }
            .box {
                width: 100%;
                overflow: hidden;
                background-repeat: no-repeat;
                background-size: 100%;
                background-attachment: fixed;
            }

<div class="box"></div>

// 创建json文件数据，并获取
            let data;
            let xhr = new XMLHttpRequest();
            xhr.open('get', 'js/树形菜单.json');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let text = xhr.responseText;
                    data = JSON.parse(text);
                    show(data);
                }
            }
            // 获取DIV框架
            let box = document.getElementsByClassName('box')[0];
            // 创建空字符串
            let str = '';
            // 变量声明真
            let statuss = true;
            function show(data) {
                // 判断是真的时候添加ul标签，否则添加ul为none
                if (statuss) {
                    str += '<ul>';
                } else {
                    str += '<ul style="display:none">';
                }
                // 循环下标判断是否有子元素
                for (let i = 0; i < data.length; i++) {
                    str += '<li>' + data[i].name + '</li>';
                    if (data[i].children) {
                        statuss = false;
                        show(data[i].children);
                    } else {
                        str += '<ul></ul>';
                    }
                    str += '</li>';
                }
                str += '</ul>';
                box.innerHTML = str;
                console.log(str);
                // 返回 str清零，继续执行函数
                return str;
            }
            box.addEventListener("click", function(e) {
                let targets = e.target;
                console.log(targets);
                if (targets.nodeName === "LI") {
                    let nexts = targets.nextElementSibling;
                    if (nexts.nodeName === "UL") {
                        if (nexts.style.display == "none") {
                            nexts.style.display = "block";
                        } else {
                            nexts.style.display = "none";
                        }
                    }
                }
            })