JS递归树形菜单

啥叫递归
聊递归之前先看一下什么叫递归。
递归，就是在运行的过程中调用自己。

构成递归需具备的条件：
1. 子问题须与原始问题为同样的事，且更为简单；
2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。

递归语言例子
我们用2个故事来阐述一下什么叫递归。

1，从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？“从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？‘从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？……’”

2，大雄在房里，用时光电视看着从前的情况。电视画面中的那个时候，他正在房里，用时光电视，看着从前的情况。电视画面中的电视画面的那个时候，他正在房里，用时光电视，看着从前的情况……

接下来看一下代码吧
 

<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 += '<ul style="display:none">';
				}
				//循环数据
				for (let i = 0; i < data.length; i++) {
					//拼接type里的内容
					str += '<li>' + data[i].type + '</li>';
					//判断是不是元素的子元素
					if (data[i].children) {
						//是的话变量为false
						statuss = false;
						//自调用函数
						show(data[i].children);
						//否则拼接ul标签
					} else {
						str += '<ul></ul>';
					}
					// str += '</li>';
				}
				//闭合标签
				str += '</ul>';
				//输出到页面中
				box.innerHTML = str;
				// console.log(str);
				//返回str的值
				return str;
			}
			// let box = document.getElementById("box");
			box.addEventListener("click", function(e) {
				let targets = e.target;
				console.log(targets);
				if (targets.nodeName === "LI") {
					let nexts = targets.nextElementSibling;
					if (nexts.nodeName === "UL") {
						if (nexts.style.display == "none") {
							nexts.style.display = "block";
						} else {
							nexts.style.display = "none";
						}
					}
				}
			})
		</script>

由于我是写的json假数据，所以没有结构和样式哦~，样式就是数组包对象，对象里面再包数组对象这样写，页面只需要一个空 div就可以哦家人们！