递归函数是一种函数调用自身的函数。它通常用于解决可以被分解为相同问题的子问题的问题，这些子问题的结果被合并为原问题的解。递归函数在编程中广泛使用，特别是在解决树和图相关的问题时。一个递归函数通常有两个部分：基本情况和递归情况。基本情况是当函数参数满足一定条件时函数直接返回结果，而递归情况则是将问题分解成一个或多个子问题，然后用函数自身解决这些子问题，最终将结果合并成原问题的解。递归函数需要小心地设计，以确保它们能够正确地停止，并且不会导致无限递归。
树形菜单功能呢，他就像点菜单点开一项呢，他就出来这一项的内容，让小伙伴们看起来更舒服，分类明确。
这是展示出来的版本（做的不太好！嘻嘻），接下来让我一起来看看代码把！（需要改正的地方轻请多多指点！）
JSON:
这是一个数组，在js文件里，创建json文件，然后把数组扔进去，然后连接他就好了
[{ "name": "菜单1", "child": [{ "name": "菜单1-1", "child": [{ "name": "菜单1-1-1" }] }] }, { "name": "菜单2", "child": [{ "name": "菜单2-1" }, { "name": "菜单2-2" }, { "name": "菜单2-3", "child": [{ "name": "菜单2-3-1" }] }] }, { "name": "菜单3", "child": [{ "name": "菜单3-1" }] }, { "name": "菜单4" }, { "name": "菜单5", "child": [{ "name": "菜单5-1" }, { "name": "菜单5-2" }, { "name": "菜单5-3" }] }, { "name": "菜单6" }, { "name": "菜单7", "child": [{ "name": "菜单7-1", "child": [{ "name": "菜单7-1-1" }] }] }, { "name": "菜单8", "child": [{ "name": "菜单8-1" }, { "name": "菜单8-2" }] }]
CSS：
<style> * { margin: 0; padding: 0; } .beijing { background-color: #009487; width: 100%; height: 1500px; } .shuju { padding-top: 3%; text-align: center; } .shuju h1 { color: #EFEFA0; } .xian hr { color: white; height: 1px; margin-left: 22%; margin-top: 2%; width: 50%; } .caidan{ width: 70%; margin-left: 22%; color: aliceblue; font-size: 40px; } .caidan_yiji{ width: 70%; } .caidan_cai{ width: 100%; display: flex; justify-content: space-between; border-bottom: 1px #ffffff solid; } </style>
HTML：
最下面是创建的JS文件，这里是外联的方式，这样更规范哦~~
<body> <div class="beijing"> <div class="shuju"> <h1>数据分类</h1> <div class="xian"> <hr> </div> </div> <div class="caidan"> </div> </div> <script src="js/递增函数.js"></script> </body>
JS：
let str = ""; let xml = new XMLHttpRequest(); xml.open("get", "./js/deta.json"); /*data.json 这是一个数组，在js文件里，创建json文件，然后把数组扔进去，这里连接他就好了*/ xml.send(); xml.onreadystatechange = function() { if (xml.readyState == 4 && xml.status == 200) { let text = xml.responseText; let deta = JSON.parse(text); renders(deta); document.getElementsByClassName("caidan")[0].innerHTML = str; } } function renders(arr) { for (let i = 0; i < arr.length; i++) { console.log(arr[i].child); if (arr[i].child != null && arr[i].child.length > 0) { str += ` <div class="caidan_yiji" onclick="yiji(this)"> <p class="caidan_cai">${arr[i].name}<img src="./img/下拉.png" alt="" width="40px" height="40px"></p> </div> <div class="caidan_yiji" style="display:none;">`; renders(arr[i].child); str += `</div>`; }else{ str += `<p class="caidan_i">${arr[i].name}</p>`; } } } function yiji(ele){ if (ele.nextElementSibling.style.display == "none") { ele.nextElementSibling.style.display = "block"; } else{ ele.nextElementSibling.style.display = "none"; } }
以上就是这个树形菜单的大致功能了，做的不足的地方请大家多多指点啦！
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)
