树形菜单，二级菜单，带菜单收缩图标

最新推荐文章于 2022-12-11 22:15:06 发布

welloffG

最新推荐文章于 2022-12-11 22:15:06 发布

阅读量718

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/weixin_46305078/article/details/110387721

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

数据是从数据库中查询出来的
在这里插入图片描述
一般有二级菜单显示的话都会有一个字段用来存储父菜单的编号，pid是我的父菜单编号，一级菜单编父编号为0，二级菜单的父编号为父编号的id值

我的做法是，先查询出所有的一级菜单，然后存在一个数组中，再循环一级菜单去单个查询该菜单下的二级菜单，然后存在单独的一个list中，存在json里返回页面。
可以看到one是一级菜单，two是二级菜单，后面是数字是是一级菜单的id，也就是二级菜单的pid值，区分属于哪个一级菜单的子菜单。
在这里插入图片描述
每个一级菜单都是一个li，收缩图和一级菜单名称放在一个div中，二级菜单单独在一个div中，在这个div中，二级菜单又是一个ul

	<div class="per16">
				<ul id="uu" name="uu" class="per17">
				</ul>
			</div>

	/**
	 * @Title: @Description: 权限管理获取权限信息 @param @return @throws
	 */
	@ResponseBody
	@RequestMapping(value = "getPermission", method = { RequestMethod.POST, RequestMethod.GET })
	public String getPermission(HttpSession session) {
		JSONObject jsonObject = new JSONObject();
					Map<String, Object> map = new HashMap<String, Object>();
					List<Permission> perList = new ArrayList<Permission>();
					//先查询pid为0的菜单，也就是一级菜单
					perList = permissionMapper.get(0);
					// 1级
					if (perList.size() > 0) {
						List<Permission> perList2 = new ArrayList<Permission>();
						for (Permission d : perList) {
							perList2.clear();
							//根据一级菜单的id去查询子菜单
							perList2 = permissionMapper.get(d.getId());
							if (perList2.size() > 0) {
								// 2级
								List<Permission> perList3 = new ArrayList<Permission>();
								//存储的时候用two＋父菜单的id区分是哪个一级菜单的子菜单
								jsonObject.put("two" + d.getId(), perList2);
							}
						}
					}
					jsonObject.put("one", perList);
		return jsonObject.toString();
	}

	@Select("select * from `permission` where pid=#{pid} ")
	public List<Permission> get(long pid);

// 权限信息
function getPermission() {
	$
			.ajax({
				url : '/system/getPermission',
				type : 'get',
				dataType : 'json',
				success : function(data) {
					// 先清空ul下的内容
					var div = document.getElementById("uu");
					while (div.hasChildNodes()) // 当div下还存在子节点时 循环继续
					{
						div.removeChild(div.firstChild);
					}
					//先获取一级菜单循环输出
					var first = data.one;
					if (first.length > 0) {
						for (var i = 0; i < first.length; i++) {
							var info1 = first[i];
							var row = "";
							var row1 = '<li><div style="height: 25px; width: 25%; float: left;" οnclick="f(\'sub_menu_one'
									+ info1.id
									+ '\')">'
									+ '<div id="svgone'
									+ info1.id
									+ '" style="float: left; height: 80%; line-height: 30px;margin-top: 4px;" >'
									+ '<svg t="1600241413777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8075" width="16" height="16"> <path d="M385.536 102.4l398.848 364.544c12.288 10.752 19.456 26.624 19.456 43.008s-7.168 32.256-19.456 43.008l-398.848 364.544c-18.944 17.92-46.08 23.552-70.656 14.336s-40.96-31.232-43.52-57.344V145.408c2.048-26.112 18.944-48.128 43.52-57.344 24.064-9.216 51.712-3.584 70.656 14.336z" fill="#8ec6d8" p-id="8076"></path></svg>'
									+ '	</div><div style="float: left;"><label  style="color: #8ec6d8;font-size: 15px;">'
									+ info1.name
									+ '</label></div></div>'
									+ '<div style="height: 25px; width: 25.2%; float: left; color: #8ec6d8; font-size: 15px; text-align: left;">'
									+ info1.alias
									+ '</div>'
									+ '	<div style="height: 25px; width: 24.5%; float: left; color: #8ec6d8; font-size: 15px; text-align: left;">'
									+ info1.createTimeString
									+ '</div>'
									+ '<div style="height: 25px; width: 22%; float: left; color: #8ec6d8; font-size: 20px; text-align: left;">'
									+ '<div style="height: 100%; width: 30%; float: left;" οnclick="zengjia(\''
									+ info1.id
									+ '\')"><svg t="1602918771545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1168" width="16" height="16">'
									+ '<path	d="M900.7 432.2H548.4V109.3c0-20.2-16.5-36.7-36.7-36.7-20.2 0-36.7 16.5-36.7 36.7v322.9H122.8c-20.2 0-36.7 16.5-36.7 36.7 0 20.2 16.5 36.7 36.7 36.7h352.3v381.6c0 20.2 16.5 36.7 36.7 36.7 20.2 0 36.7-16.5 36.7-36.7V505.6h352.3c20.2 0 36.7-16.5 36.7-36.7-0.1-20.2-16.6-36.7-36.8-36.7z" fill="#8ec6d8" p-id="1169"></path></svg></div>'
									+ '<div style="height: 100%; width: 30%; float: left;" οnclick="bianji(\''
									+ info1.id
									+ '\')">'
									+ '	<svg t="1571620106318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4197" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> <defs>'
									+ '<style type="text/css"></style></defs><path d="M146.261333 85.333333C112.64 85.333333 85.333333 112.64 85.333333 146.261333v731.477334C85.333333 911.36 112.64 938.666667 146.261333 938.666667h731.477334C911.36 938.666667 938.666667 911.36 938.666667 877.738667v-335.232a30.378667 30.378667 0 0 0-30.464-30.464 30.378667 30.378667 0 0 0-30.464 30.464v335.36H146.261333V146.218667h335.36A30.378667 30.378667 0 0 0 512 115.797333 30.378667 30.378667 0 0 0 481.578667 85.333333H146.261333z" fill="#8ec6d8" p-id="4198"></path>'
									+ '<path d="M776.533333 112.085333L422.912 465.493333c-8.277333 8.32-14.037333 18.858667-16.512 30.336l-22.058667 103.338667a30.421333 30.421333 0 0 0 34.474667 34.432l103.210667-22.357333c11.477333-2.432 21.930667-8.192 30.122666-16.469334l353.706667-353.450666a91.392 91.392 0 1 0-129.28-129.237334z m86.186667 43.050667a30.421333 30.421333 0 0 1 0 43.050667l-353.792 353.493333-54.741333 11.946667 11.776-55.04 353.706666-353.450667a30.549333 30.549333 0 0 1 43.050667 0z" fill="#8ec6d8" p-id="4199"></path></svg>	</div>'
									+ '<div style="height: 100%; width: 30%; float: left;" οnclick="shanchu(\''
									+ info1.id
									+ '\')"><svg t="1571620017678" class="icon" viewBox="0 0 1024 1024"	version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3443" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"	height="16"><defs><style type="text/css"></style></defs>'
									+ '<path d="M713.728 183.808h-71.68V102.912c0-14.336-11.264-25.6-25.6-25.6h-209.92c-14.336 0-25.6 11.264-25.6 25.6v80.896h-71.68V102.912c0-53.76 43.52-97.28 97.28-97.28h209.92c53.76 0 97.28 43.52 97.28 97.28v80.896z" fill="#8ec6d8" p-id="3444"></path>'
									+ '<path	d="M951.808 209.92h-880.64c-19.456 0-35.84-15.872-35.84-35.84 0-19.456 15.872-35.84 35.84-35.84h880.64c19.968 0 35.84 15.872 35.84 35.84s-16.384 35.84-35.84 35.84zM757.248 1021.44h-491.52c-53.76 0-97.28-43.52-97.28-97.28V306.176c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v618.496c0 14.336 11.264 25.6 25.6 25.6h491.52c14.336 0 25.6-11.264 25.6-25.6V307.2c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v616.96c0 53.76-43.52 97.28-97.28 97.28z" fill="#8ec6d8" p-id="3445"></path>'
									+ '<path d="M409.088 875.52c-19.968 0-35.84-15.872-35.84-35.84V378.88c0-19.456 15.872-35.84 35.84-35.84 19.456 0 35.84 15.872 35.84 35.84v460.8c0 19.968-16.384 35.84-35.84 35.84zM613.888 875.52c-19.968 0-35.84-15.872-35.84-35.84V378.88c0-19.456 15.872-35.84 35.84-35.84 19.456 0 35.84 15.872 35.84 35.84v460.8c0 19.968-16.384 35.84-35.84 35.84z"	fill="#8ec6d8" p-id="3446"></path></svg></div></div>'
									+ '<div><ul id="sub_menu_one'
									+ info1.id
									+ '"  style="list-style: none;display: none; ">'
							row = row + row1;
							// 二级菜单
							var s = "two" + info1.id;
							console.log(data.hasOwnProperty(s));
							if (data.hasOwnProperty(s)) {// 操作
								var two = data[s];
								if (two.length > 0) {
									for (var j = 0; j < two.length; j++) {
										var info2 = two[j];
										var row3 = '<li style="height: 22px;"><div style="height: 25px; width: 25%; float: left; color: #0d7e84e0; font-size: 15px; text-align: left;">'
												+ info2.name
												+ '</div>'
												+ '<div style="height: 25px; width: 25.8%; float: left; color: #0d7e84e0; font-size: 15px; text-align: left;">'
												+ info2.alias
												+ '</div>'
												+ '<div style="height: 25px; width: 25.2%; float: left; color: #0d7e84e0; font-size: 15px; text-align: left;">'
												+ info2.createTimeString
												+ '</div>'
												+ '<div style="height: 25px; width: 22%; float: left; color: #0d7e84e0; font-size: 15px; text-align: left;"> <div style="height: 100%; width: 30%; float: left;"></div><div style="height: 100%; width: 31%; float: left;" οnclick="bianji(\''
												+ info2.id
												+ '\')">'
												+ '	<svg t="1571620106318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4197" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> <defs>'
												+ '<style type="text/css"></style></defs><path d="M146.261333 85.333333C112.64 85.333333 85.333333 112.64 85.333333 146.261333v731.477334C85.333333 911.36 112.64 938.666667 146.261333 938.666667h731.477334C911.36 938.666667 938.666667 911.36 938.666667 877.738667v-335.232a30.378667 30.378667 0 0 0-30.464-30.464 30.378667 30.378667 0 0 0-30.464 30.464v335.36H146.261333V146.218667h335.36A30.378667 30.378667 0 0 0 512 115.797333 30.378667 30.378667 0 0 0 481.578667 85.333333H146.261333z" fill="#0d7e84e0" p-id="4198"></path>'
												+ '<path d="M776.533333 112.085333L422.912 465.493333c-8.277333 8.32-14.037333 18.858667-16.512 30.336l-22.058667 103.338667a30.421333 30.421333 0 0 0 34.474667 34.432l103.210667-22.357333c11.477333-2.432 21.930667-8.192 30.122666-16.469334l353.706667-353.450666a91.392 91.392 0 1 0-129.28-129.237334z m86.186667 43.050667a30.421333 30.421333 0 0 1 0 43.050667l-353.792 353.493333-54.741333 11.946667 11.776-55.04 353.706666-353.450667a30.549333 30.549333 0 0 1 43.050667 0z" fill="#0d7e84e0" p-id="4199"></path></svg>	</div>'
												+ '<div style="height: 100%; width: 29%; float: left;" οnclick="shanchu(\''
												+ info2.id
												+ '\')"><svg t="1571620017678" class="icon" viewBox="0 0 1024 1024"	version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3443" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"	height="16"><defs><style type="text/css"></style></defs>'
												+ '<path d="M713.728 183.808h-71.68V102.912c0-14.336-11.264-25.6-25.6-25.6h-209.92c-14.336 0-25.6 11.264-25.6 25.6v80.896h-71.68V102.912c0-53.76 43.52-97.28 97.28-97.28h209.92c53.76 0 97.28 43.52 97.28 97.28v80.896z" fill="#0d7e84e0" p-id="3444"></path>'
												+ '<path	d="M951.808 209.92h-880.64c-19.456 0-35.84-15.872-35.84-35.84 0-19.456 15.872-35.84 35.84-35.84h880.64c19.968 0 35.84 15.872 35.84 35.84s-16.384 35.84-35.84 35.84zM757.248 1021.44h-491.52c-53.76 0-97.28-43.52-97.28-97.28V306.176c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v618.496c0 14.336 11.264 25.6 25.6 25.6h491.52c14.336 0 25.6-11.264 25.6-25.6V307.2c0-19.968 15.872-35.84 35.84-35.84s35.84 15.872 35.84 35.84v616.96c0 53.76-43.52 97.28-97.28 97.28z" fill="#0d7e84e0" p-id="3445"></path>'
												+ '<path d="M409.088 875.52c-19.968 0-35.84-15.872-35.84-35.84V378.88c0-19.456 15.872-35.84 35.84-35.84 19.456 0 35.84 15.872 35.84 35.84v460.8c0 19.968-16.384 35.84-35.84 35.84zM613.888 875.52c-19.968 0-35.84-15.872-35.84-35.84V378.88c0-19.456 15.872-35.84 35.84-35.84 19.456 0 35.84 15.872 35.84 35.84v460.8c0 19.968-16.384 35.84-35.84 35.84z"	fill="#0d7e84e0" p-id="3446"></path></svg>'
												+ '</div></div></li>'
										row = row + row3;

									}
								}
							}
							var row6 = '</ul></div></li>'
							row = row + row6;

							$("#uu").append(row);
						}

					}
				},
				error : function() {
					alert('服务器超时，请重试！');
				}
			});
}

看着挺多内容，但是其实多的是因为加了SVG图片，如果不需要可以自己删掉。还有就是前面三角的收缩分别是两张图，通过下面的方法来控制
在这里插入图片描述
并在在二级菜单的部分，会有一个和该名字对应的ul

还有一个div里面放那个svg展开收缩图，id名字为svgone+父级id

点击的时候，把这一串传进去，为了区分要打开的是哪个二级菜单，所以要把父菜单的id传进去

function f(str) {
//获取id等于传进来的值的那个元素
	var sub_menu = document.getElementById(str);
	var dis_v = sub_menu.style.display;
	// 收
	var row1 = '<svg t="1600241413777" class="icon" viewBox="0 0 1024 1024"version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8075"width="16" height="16"><path d="M385.536 102.4l398.848 364.544c12.288 10.752 19.456 26.624 19.456 43.008s-7.168 32.256-19.456 43.008l-398.848 364.544c-18.944 17.92-46.08 23.552-70.656 14.336s-40.96-31.232-43.52-57.344V145.408c2.048-26.112 18.944-48.128 43.52-57.344 24.064-9.216 51.712-3.584 70.656 14.336z" fill="#8ec6d8" p-id="8076"></path></svg>'
	// 开
	var row2 = '<svg t="1600242843076" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17135" width="16" height="16"><path d="M878.592 250.88q29.696 0 48.128 11.264t24.576 29.696 0 41.472-26.624 45.568q-82.944 92.16-159.744 180.224t-148.48 164.864q-19.456 20.48-45.568 31.744t-53.76 11.776-53.248-8.704-43.008-28.672q-39.936-44.032-82.944-90.112l-88.064-92.16q-43.008-46.08-85.504-90.624t-79.36-86.528q-17.408-19.456-22.528-40.448t1.024-38.4 23.552-28.672 45.056-11.264q35.84 0 98.816-0.512t137.728-0.512l153.6 0 150.528 0 125.952 0 79.872 0z" fill="#8ec6d8" p-id="17136"></path></svg>'
	//对传进来的值切割，取最后一个值得到的是one+父级id
	var num = str.split('_');
	var s = "svg" + num[2];
	var s2 = '#' + s;
	if (dis_v == "block") {
		sub_menu.style.display = "none";
		//根据这个值取得id等于这个值的div，清空里面的svg，然后把新的svg放进去
		$(s2).html("");
		$(s2).append(row1);
	} else {
		sub_menu.style.display = "block";
		$(s2).html("");
		$(s2).append(row2);
	}
}