这里我是用的json数据，样式数组包对象，对象里再包数组对象这样写，页面只需要一个空的div就可以实现
JS
<script> //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);//调用传参 // console.log(data); } } //获取元素 let box = document.getElementsByClassName('box')[0]; //设置一个变量为空 let str = ''; // 设置变量默认为真 let statuss = true; function show(data) { //判断如果是真 if (statuss) { //拼接ul str += '<ul>'; //否则让ul隐藏 } else { str += '<ul style="display:none">'; } //循环数据 for (let i = 0; i < data.length; i++) { //拼接type里的内容 str += '<li>' + data[i].type + '</li>'; //判断是不是元素的子元素 if (data[i].children) { //是的话变量为false statuss = false; //自调用函数 show(data[i].children); //否则拼接ul标签 } else { str += '<ul></ul>'; } // str += '</li>'; } //闭合标签 str += '</ul>'; //输出到页面中 box.innerHTML = str; // console.log(str); //返回str的值 return str; } // let box = document.getElementById("box"); 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"; } } } }) </script>
