树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习js的同志来说是一个非常好的递归函数学习案例。本文演示一个非常简单的树形菜单，不仅简洁，而且样式可塑性高，欢迎萌新前来学习和交流。
在JavaScript中，递归是一种实现自身调用的技术。递归函数在解决以下情况时非常有用：
- 处理树形结构：递归在处理树或嵌套对象时非常有用。通过递归函数可以遍历整个树，并对每个节点执行相同的操作。
- 解决问题的重复子问题：有些问题可以被分解为更小的、类似的子问题。通过递归，可以重复地调用函数来解决这些子问题，最终得出最终结果。
- 递归定义和计算数学公式或序列：某些数学公式或序列可以通过递归方式来定义和计算。递归函数可以通过先计算较小的值，然后使用它们来计算更大的值。
虽然递归是一个强大的工具，但需要注意递归深度和性能问题。如果递归深度太大，可能会导致栈溢出错误。在使用递归时，务必确保存在终止条件，以避免无限循环。
开始演示
首先是html结构
html
（主要是为了好看，其实一个div就够了，其他内容都是js渲染上去的）
<body> <h1>我是标题</h1> <hr width="50%"> <div class="item"></div> <hr width="50%"> //引入js文件 <script src="js/index.js"></script> </body>
js部分
菜单JOSN数据,其他的数据长得都一样，因为up比较懒，所以只展示一条菜单的数据：
手写json文件，用AJAX请求数据：
[{ "name": "一级菜单1", "child": [{ "name": "二级菜单1-2-1", "child": [{ "name": "三级菜单1-3-1" }] }, { "name": "二级菜单1-2-2" }, { "name": "二级菜单1-2-3", "child": [{ "name": "三级菜单1-3-2" }, { "name": "三级菜单1-3-3", "child": [{ "name": "四级菜单1-4-1" }, { "name": "四级菜单1-4-2" }] }] }] }]
AJAX
xhr.open('get', 'js/index.json');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
let data = JSON.parse(text);
renders(data)
}
其中的 renders 为渲染函数
js渲染页面
通过for循环遍历菜单数据，判断 ”child“ 是否存在，如果存在，就为其添加子菜单，否则 单独渲染单个菜单，以此类推，直至遍历完毕
let str = ""; function renders(data) { for (let item of data) { if (item.child) { str += `<p class="title" onclick="Btn(this)">${item.name}<img src="./img/下箭 头.png" alt=""></p> <div style="display: none;" class="box"> `;//添加子菜单 console.log(item.child); renders(item.child); str += `</div> `; } else { str += `<p class="title">${item.name}</p>`;//单独渲染菜单 } } document.getElementsByClassName("item")[0].innerHTML = str }
此功能的递归原理就是找菜单里有没有子元素，有子元素说明有下级菜单，（str为全局变量）
函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将子元素+=进”str“里，
直到找不到子元素为止，最后将末尾div补全（PS：怕新手不知道，上图的”let item of data“中的item 类似于for循环的变量 i ）。
循环执行完毕后加入到html页面中
css样式
<style> body{ background-color: darkseagreen; } h1{ text-align: center; } .line{ width: 100%; color: black; } img{ width: 20px; height: 20px; } .item{ font-size: 20px; color: white; margin: 10px 30%; width: 40% } .title{ width: 100%; display: flex; align-items: center; justify-content: space-between; } .child{ width: 95%; margin-left: 5%; display: flex; align-items: center; justify-content: space-between; } .box{ width: 95%; border-bottom: 1px solid; margin-left: 5%; margin-top: 10px; } </style>
最终的呈现效果为：
点击下拉菜单：
加入点击效果：
function Btn(element){ let childItem = element.nextElementSibling if (childItem.style.display == "block") { childItem.style.display = "none" }else{ childItem.style.display = "block" } }
就可以实现来回伸缩的样子啦，萌新们赶快去试一逝吧>w<
