js树形菜单如何用递归制作一个简单的树形菜单

Z_B_L

已于 2023-12-07 17:49:50 修改

阅读量496

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2023-09-10 15:06:24 首次发布

本文链接：https://blog.csdn.net/Z_B_L/article/details/132790888

版权

树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习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<

Z_B_L

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
js树形菜单如何用递归制作一个简单的树形菜单

树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习js的同志来说是一个非常好的递归函数学习案例。本文演示一个非常简单的树形菜单，不仅简洁，而且样式可塑性高，欢迎萌新前来学习和交流。直到找不到子元素为止，最后将末尾div补全（PS：怕新手不知道，上图的”let item of data“中的item 类似于for循环的变量 i ）。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将子元素+=进”str“里，就可以实现来回伸缩的样子啦，萌新们赶快去试一逝吧>w
复制链接

扫一扫