js（递归函数）实现树型菜单

贰零壹玖.

已于 2023-09-14 16:33:22 修改

阅读量318

点赞数 2

文章标签： javascript 前端服务器

于 2023-09-14 16:30:49 首次发布

本文链接：https://blog.csdn.net/2301_79265530/article/details/132882164

版权

效果图：

先创建一个JSON文件

[
	{
		"name":"一级菜单1",
		"child":[
			{
				"name":"二级菜单1-1"
				
			},{
				"name":"二级菜单1-2",
				"child":[
					{
						"name":"三级菜单1-2-1"
						
					},{
						"name":"三级菜单1-2-2"
						
					},{
						"name":"三级菜单1-2-3"
						
					}
				]
			},{
				"name":"二级菜单1-3"
				
			}
			
		]
	},{
		"name":"一级菜单2",
		"child":[
			{
				"name":"二级菜单2-1"
				
			},{
				"name":"二级菜单2-2",
				"child":[
					{
						"name":"三级菜单2-2-1"
						
					},{
						"name":"三级菜单2-2-2"
						
					},{
						"name":"三级菜单2-2-3"
						
					}
				]
			},{
				"name":"二级菜单2-3"
				
			}
			
		]
	},{
		"name":"一级菜单3",
		"child":[
			{
				"name":"二级菜单3-1"
				
			},{
				"name":"二级菜单3-2",
				"child":[
					{
						"name":"三级菜单3-2-1"
						
					},{
						"name":"三级菜单3-2-2"
						
					},{
						"name":"三级菜单3-2-3"
						
					}
				]
			},{
				"name":"二级菜单3-3"
				
			}
			
		]
	},{
		"name":"一级菜单4",
		"child":[
			{
				"name":"二级菜单4-1"
				
			},{
				"name":"二级菜单4-2",
				"child":[
					{
						"name":"三级菜单4-2-1"
						
					},{
						"name":"三级菜单4-2-2"
						
					},{
						"name":"三级菜单4-2-3"
						
					}
				]
			},{
				"name":"二级菜单4-3"
				
			}
			
		]
	},{
		"name":"一级菜单5",
		"child":[
			{
				"name":"二级菜单5-1"
				
			},{
				"name":"二级菜单5-2",
				"child":[
					{
						"name":"三级菜单5-2-1"
						
					},{
						"name":"三级菜单5-2-2"
						
					},{
						"name":"三级菜单5-2-3"
						
					}
				]
			},{
				"name":"二级菜单5-3"
				
			}
			
		]
	}
]

js部分

<script>
			// ajax请求JSON文件
			let xhr = new XMLHttpRequest();
			// 创建 XMLHttpRequest 对象
			xhr.open('get', 'js/index.json', true);
			// 使用 open 方法指定要请求的地址、类型和方式。
			xhr.send();
			// 使用 send 方法发送请求，如果需要传参：
			// get 方式要将参数拼接到 URL 后边，参数间&分割。例：’index.php?name=张三&age=18’ 
			// post 方式可以将参数放到 send()里。例：send(‘name=张三&age=18’)
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					// 绑定 onreadystatechange 事件，判断 readyState 和 status 的状态
					let text = xhr.responseText;
					// console.log(text);
					let data = JSON.parse(text);
					// 接收数据，通过 json 转换使用
					console.log(data);
					reders(data)
				}
			};

			let str = ""
			// 创建一个空变量
			
			// 渲染函数需要用到递归函数
			function reders(data) {
				for (let item of data) {
					
					if (item.child) {
						str += `<p class="one" onclick="but(this)">${item.name}<img src="./img/下拉.png" style="height: 20px;"></p>
						<div style="display: none;" class="bill">`
						reders(item.child)
						str += `</div>`
					} else {
						str += `<p class="one">${item.name}</p>`
					}
				}
				document.getElementsByClassName("text")[0].innerHTML = str
			}

			// 点击显示判断和隐藏
			function but(e) {
				let childItem = e.nextSibling.nextSibling
				if (childItem.style.display == "block") {
					childItem.style.display = "none"
				} else {
					childItem.style.display = "block"
				}
			}
				
		</script>

html和css

<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #019588;
			}

			.text {
				width: 80%;
				height: 500px;
				margin-left: 10%;
				color: #ffffff;
			}

			em {
				background-color: #ffffff;
				height: 2px;
				display: block;
			}

			.one {
				margin-top: 2%;
			}

			.bill {
				margin-left: 5%;
			}
		</style>







<h3 style="text-align: center;">数据分类</h3>
		<i style="background-color: #ffffff; display: block; height: 1px;"></i>
		<div class="text">
			
		</div>