hallo 大家好 我是你们的孟大王 我今天刚做好一个树形菜单的功能 给你们分享一下
首先我想分享的是，什么是递归函数——如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环,这就是递归函数
简单来说就是在一个function里面调用一个函数
常见的树形菜单就可以用递归函数很轻松的实现
话不多说 直接上代码！
首先要先写html结构
<h1>树形菜单</h1> <hr class="hr_one"> <div class="box"></div>
其次是css样式
* { margin: 0%; padding: 0%; } h1 { text-align: center; letter-spacing: 10px; color: aliceblue; } .hr_one{ width: 90%; margin: 0 5%; } body { background-color: #008386; } .box { width: 50%; margin: 0 25%; } .box img { width: 20.55px; height: 20.55px; } .box_item:hover { background-color: #007173; } .box_item { width: 95%; line-height: 5vh; margin-left: 5%; display: flex; justify-content: space-between; color: aliceblue; align-items: center; border-bottom: 1px solid #ffffff; } .box_item_bro{ width: 95%; line-height: 5vh; margin-left: 5%; color: aliceblue; align-items: center; }
html和css样式完成以后可以开始js的渲染了
首先要先创建数据到json文件中（我就随便创建几组数据）：
[{ "name": "一级菜单1", "child": [{ "name": "二级菜单1-2-1", "child": [{ "name": "三级菜单1-3-1", "child": [{ "name": "四级菜单1-4-1", "child": [{ "name": "五级菜单1-5-1" }] }] }, { "name": "三级菜单1-3-2" }] }, { "name": "二级菜单1-2-2" }] }, { "name": "一级菜单2", "child": [{ "name": "二级菜单2-2-1" }, { "name": "二级菜单2-2-2", "child": [{ "name": "三级菜单2-3-1" }, { "name": "三级菜单2-3-2" }] }] }, { "name": "一级菜单3", "child": [{ "name": "二级菜单3-2-1" }, { "name": "二级菜单3-2-2" }] }, { "name": "一级菜单4" }, { "name": "一级菜单5", "child": [{ "name": "二级菜单5-2-1", "child": [{ "name": "三级菜单5-3-1", "child": [{ "name": "四级菜单5-4-1", "child": [{ "name": "五级菜单5-5-1", "child": [{ "name": "六级菜单5-6-1" }, { "name": "六级菜单5-6-2" }, { "name": "六级菜单5-6-3" }] }, { "name": "五级菜单5-5-2" }] }] }, { "name": "三级菜单5-3-2" }, { "name": "三级菜单5-3-3" }] }, { "name": "二级菜单5-2-2" }] }, { "name": "一级菜单6" }, { "name": "一级菜单7" }, { "name": "一级菜单8", "child": [{ "name": "二级菜单8-2-1" }, { "name": "二级菜单8-2-2" }] }]
接着开始请求json文件内的数据
//设置变量用于存储拼接标签字符串 let str = ''; let box_item = document.getElementsByClassName('box_item')[0]; //请求到json文件数据 let xhr = new XMLHttpRequest(); xhr.open('get', 'index.json', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { let text = xhr.responseText; // console.log(text); let data = text; console.log(JSON.parse(data)); renders(JSON.parse(data)); console.log(JSON.parse(data)); } }
根据console.log来判断是否请求成功，请求成功的话就可以开始下一步也就是Js的渲染了
//执行调用渲染函数 function renders(data) { // console.log(arr); for (let i = 0; i < data.length; i++) { if (data[i].child) { str += ` <div class="box_item" onclick="butn(event)"> <div>${data[i].name}</div> <img src="./img/下箭头-copy.png"> </div> <div class="box_item_bro" style="display: none;">` renders(data[i].child); str += `</div> ` } else { str += `<div class="box_item"> <div>${data[i].name}</div> </div>` } } document.getElementsByClassName('box')[0].innerHTML = str; }
函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将结构拼接到str内部
之后添加点击事件即可完成
function butn(e) { // console.log(e.target); let child_item = e.target.nextElementSibling; // console.log(child_item); if (child_item.style.display == "block") { child_item.style.display = "none"; } else { child_item.style.display = "block"; } }
