js-点击-二级菜单的初步形成

最新推荐文章于 2023-11-18 22:58:50 发布

¡Venceremo

最新推荐文章于 2023-11-18 22:58:50 发布

阅读量273

点赞数

分类专栏： javascript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127559997

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		/* 最大外围框架 */
		div.sdmenu {
			width: 250px;
			padding: 5px;
			font-size: 12px;
			background-color: red;
			margin: 50px auto;
		}

		div.sdmenu div {
			overflow: hidden;
		}

		/* 小菜单--标题*/
		div.sdmenu div span {
			box-sizing: border-box;
			display: block;
			line-height: 20px;
			background-color: #999;
			padding: 10px 0px;
			color: #fff;
			height: 40px;
			text-align: center;
			border-bottom: 1px solid plum;
		}

		/* 小菜单 内容 所有的链接*/
		div.sdmenu div a {
			display: block;
			height: 30px;
			line-height: 30px;
			background-color: #eee;
			color: green;
			text-align: center;
			box-sizing: border-box;
			border-bottom: 1px solid #aaa;
		}

		.collapsed {
			height: 40px; //高度等于 span的高度 让其他的溢出等于0
		}

		div.sdmenu a:hover {
			color: black;
			background: #ccc;
		}

		/* 小菜单 隐藏*/
		div.sdmenu div.collapsed a {
			background-color: #eee;
			width: 250px;
			height: 30px;

		}
	</style>
	<script src="tool动画.js"></script>
	<script>
		window.onload = function() {
			/**
			 * 每一个菜单都是一个div
			 * 当div有collapsed类 div折叠
			 * 没有 展开
			 * */
			/*点击菜单 切换菜单的展开状态*/
			//为了兼容IE8 不然可以使用 document.getElementsByClassName()
			var menuSpan = document.querySelectorAll(".menuSpan");

			for (var i = 0; i < menuSpan.length; i++) {
				menuSpan[i].onclick = function() {
					//获取当期div
					var parentDiv = this.parentNode;

					toggClass(parentDiv, "collapsed");

				}
			}
		}
	</script>
	<body>
		<div id="mymenu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按扭生成器</a>
			</div>
			<!-- collapsed 可以折叠的菜单 -->
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">codingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>