JavaScript使用递归制作树形结构

最新推荐文章于 2023-06-10 11:33:41 发布

原创最新推荐文章于 2023-06-10 11:33:41 发布 · 475 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

8 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的树状菜单示例代码，该示例展示了如何通过递归函数生成多级嵌套的HTML列表。示例中包含了前端开发、移动开发等IT领域的子分类。

示例图：
在这里插入图片描述

JavaScript（tree.js）：

var data = [{
		name: 'IT互联网',
		child: [{
				name: '编辑语言',
				child: [{
						name: 'java'
					}, {
						name: 'c#/.net'
					}, {
						name: 'python'
					},
					{
						name: '前端开发',
						child: [{
							name: 'jq'
						}, {
							name: 'vue'
						}, {
							name: 'react'
						}]
					}
				]
			},
			{
				name: '移动开发',
				child: [{
					name: 'android开发'
				}, {
					name: 'IOS开发'
				}]
			},
			{
				name: '游戏开发',
				child: [{
					name: 'phaser游戏开发'
				}, {
					name: 'webGL游戏开发',
					child: [{
						name: '3D游戏'
					}, {
						name: '2D游戏'
					}]
				}]
			}
		]
	},
	{
		name: '设计创作',
		child: [{
				name: '平面设计',
				child: [{
					name: '电商美工'
				}, {
					name: '综合平面设计'
				}, {
					name: '摄影后期'
				}]
			},
			{
				name: 'UI设计',
				child: [{
					name: '交互设计'
				}, {
					name: 'webUI设计'
				}, {
					name: '游戏UI设计'
				}]
			},
			{
				name: '软件设计'
			}
		]
	},
	{
		name: '升学考研',
		child: [{
			name: '考研'
		}, {
			name: '大学'
		}, {
			name: '高中'
		}, {
			name: '初中'
		}]
	},
	{
		name: '职企考证',
		child: [{
			name: '公务员',
			child: [{
				name: '教师考试'
			}, {
				name: '建筑工程'
			}]
		}]
	},
];

window.onload = function() {
	//递归
	function tree(data) {
		var str = "<ul>";
		for (var i = 0; i < data.length; i++) {
			str += "<li>" + data[i].name;
			if (data[i].child) {
				str += tree(data[i].child)
			}
			str += "</li>";
		}
		str += "</ul>";
		return str;
	}
	document.querySelector(".lists").innerHTML = tree(data);
}

HTML（index.html）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/tree.js"></script>
	</head>
	<body>
		<div class='lists'></div>
	</body>
</html>