web前端开发之二级菜单的隐藏和展开

最新推荐文章于 2022-11-21 00:06:00 发布

萧凝云

最新推荐文章于 2022-11-21 00:06:00 发布

阅读量5.1k

点赞数

分类专栏： ----------前端开发

本文链接：https://blog.csdn.net/qq_36936155/article/details/72616813

版权

----------前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>caidan</title>
	<style>
		#navigation{
			width: 200px;
			height: 1000px;
			float: left;

		}
		#navigation>ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px;

		}
		#navigation>ul>li{
			border-bottom: 5px soild #ED9F9F;
		}
		#navigation>ul>li>a{
			display: block;
			padding: 5px 5px 5px 0.5em;
			text-decoration: none;
			border-left: 12px soild #711515;
			border-left: 1px soild #711515;
		}
		#navigation>ul>li>a:link,#navigation>ul>li>a:visited{
			background-color: #c11136;
			color: #FFFFFF;

		}
		#navigation >ul>li>a:hover{
			background-color: #990020;
			color: #ffff00;
		}
		#navigation ul li ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px 0px 0px 0px;

		}
		#navigation ul li ul li{
			border-top: 1px solid #ED9F9F;
		}
		#navigation ul li ul li a{
			display: block;
			padding: 3px 3px 3px 0.5em;
			text-decoration:none;
			border-left: 28px solid #a71f1f;
			border-right:1px solid #711515;
		}
		#navigation ul li a:link,#navigation ul li li a:visited{
			background-color: #e85070;
			color: #FFFFFF;
		}
		#navigation ul li ul li a:hover{
			background-color: #c2425d;
			color: #ffff00;
		}
		#navigation ul li ul.myHide{
			display: none;
		}
		#navigation ul li ul.myShow{
			display: block;
		}
	</style>
	<script>
		window.οnlοad=function(){
			var oUl = document.getElementById("listUL");
			var aLi = oUl.childNodes;//获取所有子元素返回一个子元素节点集合包括#text节点，在DOM中，文本也是一个节点，类型为DOM Text，包含进去了每个li节点前面的文本节点"回车 "，即一个回车后面跟很多空格
			var oA;
			for(var i = 0;i<aLi.length;i++){

				if (aLi[i].tagName=="LI"&&aLi[i].getElementsByTagName("ul").length) {//找到同时满足标签名为li和返回带有ul标签名的对象的长度不为空的li节点
					oA = aLi[i].firstChild;//获得a标签
					oA.onclick = change;//给a标签绑定事件
				}
			}
		}
		function change(){
			var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//找到
			if (oSecondDiv.className=="myHide") {
				oSecondDiv.className="myShow";
			}else{
				oSecondDiv.className="myHide";
			}
		}
	</script>
</head>
<body>
	<div id="navigation">
		<ul id="listUL">
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a>
			<ul class="myHide">
				<li><a href="#">Lastest News</a></li>
					<li><a href="#">All News</a></li>
				</ul>
			</li>
			<li><a href="#">Sports</a>
			<ul class="myHide">
				<li><a href="#">Basketball</a></li>
					<li><a href="#">Football</a></li>
						<li><a href="#">Volleyball</a></li>
				</ul>
			</li>
			<li><a href="#">Weather</a>
			<ul class="myHide">
				<li><a href="#">Today's Weather</a></li>
					<li><a href="#">Forecast</a></li>
				
				</ul>
			</li>
			<li><a href="#">Contact Me</a></li>
		</ul>
	</div>
</body>
</html>

萧凝云

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
web前端开发之二级菜单的隐藏和展开

caidan #navigation{ width: 200px; height: 1000px; float: left; } #navigation>ul{ list-style-type: none; margin: 0px; padding: 0px; } #navigation>ul>li{ border-bottom
复制链接

扫一扫

专栏目录