5.4.1Bom练习，js，对象使用的小demo,二级菜单，多级菜单的展开收缩。

最新推荐文章于 2024-10-01 20:12:28 发布

杵意

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量200

点赞数

分类专栏： java基础（前后端）文章标签： javascript 前端 css

王锡豪

本文链接：https://blog.csdn.net/wang121213145/article/details/122004568

版权

java基础（前后端）专栏收录该内容

61 篇文章 5 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				padding-left: 20px;
			}
			.plus {
				background: url(../../多面旋转/img/motianlun/boy.png) no-repeat 0px 0px/20px 20px;
			}

			.minus {
				background: url(../../多面旋转/img/motianlun/girl.png) no-repeat 0px 0px/20px 20px;
			}

			.page {
				background: url(../../多面旋转/img/motianlun/boy.png) no-repeat 0px 0px/20px 20px;
			}
		</style>
	</head>
	<body>
		<ul id="menu">
			<li>
				<a href="#">一级菜单1</a>
				<ul>
					<li><a href="#">二级菜单1.1</a></li>
				</ul>
			</li>
			<li>
				<a href="#">一级菜单2</a>
				<ul>
					<li><a href="#">二级菜单2.1</a>
						<ul>
							<li><a href="#">三级菜单2.1</a>
								
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		
		<script type="text/javascript">
			let liz = document.querySelectorAll("#menu li");
			for (let i = 0; i < liz.length; i++) {
				let li1 = liz[i];
				let az = li1.querySelector("a");
				az.className="plus";

				let ul2 = li1.querySelectorAll("ul");
				if(ul2.length > 0){
					let ulz = ul2[0];
					console.log(ulz);
					let liz = ulz.querySelectorAll("li");
					for (let j = 0; j < liz.length; j++) {
						let a2 = liz[j].querySelector("a");
						a2.className = "page";
					}
					ulz.style.display="none"
					az.onclick = function(){
						if(ulz.style.display=="none"){
							this.className="minus";
							ulz.style.display="block";
						}else{
							this.className="plus";
							ulz.style.display="none"
						}
					}
				}else{
					li1.style.display="page";
				}
			}
		</script>
	</body>
</html>