js递归树形菜单

最新推荐文章于 2023-09-14 16:30:49 发布

温柔归故里

最新推荐文章于 2023-09-14 16:30:49 发布

阅读量132

点赞数 1

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/tong200617/article/details/129914539

版权

这篇博客介绍如何利用JavaScript处理JSON数据，通过递归方法构建前端树形菜单。只需一个空div，即可在页面上展示层次结构。

摘要由CSDN通过智能技术生成

这里我是用的json数据，样式数组包对象，对象里再包数组对象这样写，页面只需要一个空的div就可以实现

<script>
			//json数据传输
			let data;
			let xhr = new XMLHttpRequest();
			xhr.open('get', 'js/树形菜单.json');
			xhr.send();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					let text = xhr.responseText;
					data = JSON.parse(text);
					show(data);//调用传参
					// console.log(data);
				}
 
			}
			//获取元素
			let box = document.getElementsByClassName('box')[0];
			//设置一个变量为空
			let str = '';
			// 设置变量默认为真
			let statuss = true;
 
			function show(data) {
				//判断如果是真
				if (statuss) {
					//拼接ul
					str += '<ul>';
					//否则让ul隐藏
				} else {
					str +=