树形菜单制作

&ACE&

于 2023-06-26 16:43:09 发布

阅读量277

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_59525879/article/details/131400805

版权

运用递归函数方法制作

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.side-menu {
			width: 300px;
			border: 1px solid #ddd;
		}

		.side-menu ul li {
			list-style: none;
		}

		.side-menu ul li a {
			display: block;
			text-decoration: none;
			color: #222;
			border-bottom: 1px solid #ddd;
		}

		.subnav {
			display: none;
		}
	</style>

	<body>
		<div class="side-menu"></div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
		$(function() {
			$.ajax({
				type: "GET",
				url: "./1.JSON",
				dataType: "json",
				success: function(res) {
					let dataArr = res;

					let liStr = "";
					let oUl = $("<ul></ul>");
					let num = 5;
					if (dataArr.length > 0) {
						num += 5;
						for (var i = 0; i < dataArr.length; i++) {
							if (dataArr[i].childMenu != null && dataArr[i].childMenu.length > 0) { //有子菜单
								liStr += "<li><a href=\"" + dataArr[i].href + "\"><i class=\"" + dataArr[
										i].Left + "\"></i>" + dataArr[i].name + "<i class=\"" + dataArr[i]
									.Right + "\"></i></a><ul class=\"subnav\">";
								for (var j = 0; j < dataArr[i].childMenu.length; j++) {
									liStr += getChildMenu(dataArr[i].childMenu[j], num);
								}
								liStr += "</ul></li>";
							} else { //没有子菜单
								liStr += "<li><a href=\"" + dataArr[i].href + "\"><i class=\"" + dataArr[
										i].Left + "\"></i>" + dataArr[i].name + "<i class=\"" + dataArr[i]
									.Right + "\"></i></a></li>";
							}
						}
						oUl.html(liStr);
						$(".side-menu").append(oUl);
					}
				}
			})


			function getChildMenu(dataArr, num) { //递归创建子菜单
				let subStr = "";
				num += 10;
				if (dataArr.childMenu != null && dataArr.childMenu.length > 0) { //有子菜单
					subStr += "<li><a style=\"padding-left:" + num + "px;\" href=\"" + dataArr.href +
						"\"><i class=\"" + dataArr.Left + "\"></i>" + dataArr.name + "<i class=\"" + dataArr.Right +
						"\"></i></a><ul class=\"subnav\">";
					for (var j = 0; j < dataArr.childMenu.length; j++) {
						subStr += getChildMenu(dataArr.childMenu[j], num);
					}
					subStr += "</ul></li>";
				} else { //无子菜单
					subStr += "<li><a  style=\"padding-left:" + num + "px;\" href=\"" + dataArr.href +
						"\"><i class=\"" + DataTransfer.Left + "\"></i>" + dataArr.name + "<i class=\"" + dataArr
						.Right + "\"></i></a></li>";
				}
				return subStr;
			}

			(function SideMenuHandle() {
				$('.side-menu').on("click", "li", function(event) {
					event.stopPropagation();
					// console.log($(this).find(".subnav").length)
					if ($(this).find(".subnav").eq(0).is(":hidden")) {
						$(this).find(".subnav").eq(0).show();
					} else {
						$(this).find(".subnav").eq(0).hide();
					}
				})
			})();

		})
	</script>

</html>

制作做效果如下只是简易效果