递归树结构-html

最新推荐文章于 2023-11-05 20:51:37 发布

冷故事

最新推荐文章于 2023-11-05 20:51:37 发布

阅读量616

点赞数 1

分类专栏：前端笔记文章标签：递归树结构-html

本文链接：https://blog.csdn.net/qq_39055963/article/details/94359963

版权

前端笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有时候我们需要写一些不知道几级的菜单，下面上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var jsonarr = [{
					name: '一级标题1',
					submenu: [{
							name: '二级标题',
							submenu: [{
									name: '三级标题'
								},
								{
									name: '三级标题'
								},
								{
									name: '三级标题'
								}
							]
						},
						{
							name: '二级标题'
						},
						{
							name: '二级标题'
						},
						{
							name: '二级标题'
						}
					]
				},
				{
					name: '一级标题2',
					submenu: [{
							name: '二级标题'
						},
						{
							name: '二级标题'
						},
						{
							name: '二级标题'
						},
						{
							name: '二级标题'
						}
					]
				},
				{
					name: '一级标题3'
				}
			]
			var box = document.getElementById('box');
			var arr = [];
			var html = '';
			function draw(json){
				var ul = document.createElement('ul');
				
				json.map((item)=>{
					var li = document.createElement('li');
					li.innerHTML = '<div>'+item.name+'</div>';
					if(item.submenu){
						li.appendChild(draw((item.submenu)));
					}
					ul.appendChild(li);
				})
				return ul;
			}
			//draw(jsonarr);
			//console.log(arr);
			box.appendChild(draw(jsonarr))
			
		</script>
	</body>
</html>

冷故事

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
递归树结构-html

有时候我们需要写一些不知道几级的菜单，下面上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div>...
复制链接

扫一扫

专栏目录