划过效果--遍历数组对象到页面上（js生成）_js获取一维数组生成新的数组并生成到页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_46999664/article/details/109310865

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			height: 50px;
		}
		ul{
			list-style: none;
			/*float: left;*/
			margin-left: 30px;
		}
		li{
			/*float: left;*/
			margin-left: 30px;

		}
		.third li{
			float: none;
		}
	</style>
</head>
<body>
	<div id="boxbig">
		<div id="box">
			
		</div>
	</div>
	<script type="text/javascript">
		let array = new Array;
		let one = 1,one_1=1;
		 var arr = [
		 {"id":28,"text":"公司信息","children":[
	    	{"id":1,"text":"公司文化"},
	     	{"id":2,"text":"招聘计划"},
	    	{"id":6,"text":"公司新闻","children":[
	        	{"id":47,"text":"行业新闻"}]},
	        {"id":11,"text":"内部新闻","children":[
            	{"id":24,"text":"行政信息"},
            	{"id":27,"text":"高层指示"}]},
	        {"id":22,"text":"联系我们"},
	        {"id":26,"text":"产品展示","children":[
                {"id":32,"text":"电力产品"},
                {"id":33,"text":"配件介绍"}]}
          ]}
		];
		// console.log(arr[0].text);
		const but = document.getElementById('box');
		but.innerHTML += '<ul id='+arr[0].id+'>'+arr[0].text+'</ul>'+'<div id="button"></div>';
		const button = document.getElementById('button');
		
		but.onmouseenter = function(){
					button.innerHTML = '<ul id="sub"></ul>';
				const sub = document.getElementById('sub');
				for(let key in arr[0]){
					// console.log(arr[0].children);
					let tt;
					for(let key2 in arr[0].children){
					// console.log(arr[0].children[key2]);

						tt = arr[0].children[key2];
						if(typeof(tt.children)!='object'){
							sub.innerHTML += '<li id='+tt.id+' οnclick="onc(this)">'+tt.text+'</li>';
						}else{
							sub.innerHTML += '<ul class="third" id="'+tt.id+'" οnmοuseenter="onc(this)" οnmοuseleave="ole(this)">'+tt.text+'</ul>';
						}
						
						array.push(tt);
					}

					break;
						}
				
		}

		but.onmouseleave = function(){
			button.innerHTML = '';
			const sub = document.getElementById('sub');
			sub.innerHTML += '';
		}

function onc(data){
		if(data.className=='third'){
				let the=null;
				the = document.getElementById(data.id);
			for (let i = 0; i < array.length; i++) {
				if(data.className=='third'){
				if(typeof(array[i].children)=='object'){
						let ss=null;
						ss = array[i].children;
						for(let key3 in ss){
							// console.log(ss[key3]);
							if(array[i].id==data.id){
								the.innerHTML += '<li id='+ss[key3].id+'>'+ss[key3].text+'</li>';
							}
							
						}　　　　　　　　　　　　　　　　　　　　
					}

				}

			}
			
		}

}

function ole(data){
	the = document.getElementById(data.id).children;
	for(let i=0;i<the.length;i++){
		the[i].innerHTML = "";
	}

}
					
		
	</script>
</body>
</html>