jQuery 树型菜单完整代码

小吴吴吴呀

于 2023-11-17 22:48:03 发布

阅读量355

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/134472100

版权

jQuery 树型菜单完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>jQuery树形菜单</title>
		<script src="./js/jquery-3.6.0.js"></script>
		<style type="text/css">
			/* 初始化页面 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			/* 设置背景页面 */
			body {
				width: 100%;
				min-height: 100vh;
				background-color: #029688;
				display: flex;
				justify-content: center;
			}
			
			/* 设置树形菜单宽度 */
			.tree {
				width: 60%;
			}
			
			/* 设置树形菜单标题 */
			.tree h1 {
				width: 100%;
				height: 60px;
				text-align: center;
				line-height: 60px;
				color: #F7F29B;
				font-family: "楷体";
				letter-spacing: 3px;
			}
			
			/* 设置标题下边的水平线 */
			.tree i{
				display: block;
				width: 100%;
				height: 1px;
				background-color: #D7DBDB;
				position: relative;
			}
			
			/* 设置标题水平线中心的菱形 */
			.tree i::before{
				content: "";
				width: 7px;
				height: 7px;
				transform: rotate(45deg);
				background-color: #D7DBDB;
				position: absolute;
				top: -3px;
				left: 50%;
				margin-left: -3.5px;
			}
			
			/* 设置树形菜单列表 */
			.tree-list{
				width: 100%;
				margin-top: 20px;
			}
			
			/* 设置列表缩进效果 */
			.tree-list div{
				width: 100%;
				padding-left: 40px;
				position: relative;
				display: none;
			}
			
			/* 设置列表名称 */
			.tree-list p{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 40px;
				line-height: 40px;
				color: #F7FBFB;
			}
			
			/* 设置箭头图片 */
			.tree-list img{
				width: 14px;
				height: 14px;
				margin: 13px;
				transition: all 0.3s;
			}
			
			/* 设置箭头图片旋转效果 */
			.tree-list .active{
				transform: rotate(180deg);
			}
			
			/* 设置鼠标悬浮样式 */
			.tree-list p:hover{
				background-color: rgba(80, 220, 220, 0.2);
			}
			
			/* 设置列表分类水平线 */
			.tree-list>em{
				display: block;
				width: 100%;
				height: 2px;
				background-color: #D7DBDB;
				margin: 5px 0;
			}
		</style>
	</head>
	<body>
		
		<div class="tree">
			<h1>数据分类</h1>
			<i></i>
			<div class="tree-list"></div>
		</div>
		
		<script type="text/javascript">
			
			// 设置变量用于存储拼接的标签字符串
			let content = "";
			
			// 请求本地 json 文件
			$.ajax({
				type:"GET",
				url:"./js/data.json",
				success:function(res){
					console.log(res);
					// 调用数据拼接函数
					render(res);
					// 将字符串输出到页面中
					$(".tree-list").html(content)
				}
			})
			
			// 数据拼接函数 将数据拼接成标签字符串
			function render(arr){
				for(let item of arr){
					if(item.child != undefined && item.child.length > 0){
						content += `<p onclick="cut(event)"><span onclick="skip()">${item.name}</span><img src="img/arrows.png" /></p>
								<div>`;
						render(item.child);
						content += `</div><em></em>`;
					}else{
						content += `<p><span onclick="skip()">${item.name}</span></p><em></em>`;
					}
				}
			}
			
			// 列表显示隐藏事件
			function cut(e){
				e = e || window.event;
				let targets = e.target || e.srcElemet;
				$(targets).next("div").toggle(300);
				$(targets).find("img").toggleClass("active");
			}
			
			// 列表跳转事件
			function skip(){
				location.href = "./index.html";
			}
			
		</script>
		
	</body>
</html>

JSON 假数据文件：

[
	{
		"name":"一级菜单1",
		"child":[
			{
				"name":"二级菜单1-1",
				"child":[]
			},{
				"name":"二级菜单1-2",
				"child":[
					{
						"name":"三级菜单1-2-1",
						"child":[]
					},{
						"name":"三级菜单1-2-2",
						"child":[]
					}
				]
			},{
				"name":"二级菜单1-3",
				"child":[]
			},{
				"name":"二级菜单1-4",
				"child":[]
			},{
				"name":"二级菜单1-5",
				"child":[
					{
						"name":"三级菜单1-5-1",
						"child":[]
					},{
						"name":"三级菜单1-5-2",
						"child":[]
					}
				]
			}
		]
	},{
		"name":"一级菜单2",
		"child":[
			{
				"name":"二级菜单2-1",
				"child":[
					{
						"name":"三级菜单2-1-1",
						"child":[]
					},{
						"name":"三级菜单2-1-2",
						"child":[]
					}
				]
			},{
				"name":"二级菜单2-2",
				"child":[]
			},{
				"name":"二级菜单2-3",
				"child":[]
			}
		]
	},{
		"name":"一级菜单3",
		"child":[]
	},{
		"name":"一级菜单4",
		"child":[
			{
				"name":"二级菜单4-1",
				"child":[]
			},{
				"name":"二级菜单4-2",
				"child":[
					{
						"name":"三级菜单4-2-1",
						"child":[]
					},{
						"name":"三级菜单4-2-2",
						"child":[]
					},{
						"name":"三级菜单4-2-3",
						"child":[]
					}
				]
			},{
				"name":"二级菜单4-3",
				"child":[]
			},{
				"name":"二级菜单4-4",
				"child":[]
			},{
				"name":"二级菜单4-5",
				"child":[]
			}
		]
	},{
		"name":"一级菜单5",
		"child":[]
	},{
		"name":"一级菜单6",
		"child":[
			{
				"name":"二级菜单6-1",
				"child":[
					{
						"name":"三级菜单6-1-1",
						"child":[]
					},{
						"name":"三级菜单6-1-2",
						"child":[]
					},{
						"name":"三级菜单6-1-3",
						"child":[]
					}
				]
			},{
				"name":"二级菜单6-2",
				"child":[]
			},{
				"name":"二级菜单6-3",
				"child":[]
			}
		]
	},{
		"name":"一级菜单7",
		"child":[
			{
				"name":"二级菜单7-1",
				"child":[]
			},{
				"name":"二级菜单7-2",
				"child":[]
			}
		]
	},{
		"name":"一级菜单8",
		"child":[]
	},{
		"name":"一级菜单9",
		"child":[]
	}
]

原创作者：吴小糖

创作时间：2023.11.7