JS实现菜单的伸缩

最新推荐文章于 2022-06-24 17:55:17 发布

脱耦

最新推荐文章于 2022-06-24 17:55:17 发布

阅读量4.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： JS 菜单伸缩 HTML

本文链接：https://blog.youkuaiyun.com/hwhhwh536621/article/details/81771654

JS 专栏收录该内容

3 篇文章

订阅专栏

废话不多说，直接上源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单伸缩</title>
		<script type="text/javascript" src="js/jquery-1.9.0.js" ></script>
		<script type="text/javascript">
			//一开始将所有菜单子模块隐藏
			var hide=true;
				//通过title的变化定位到不同的元素
				function showOrHide(title){
					var d = document.getElementById("d"+title);
					//如果其属性是隐藏的，将其变为显示
					if(hide){
						d.style.display = "block";
						//hide变为false
						hide = false;
						//反之，将其属性变为隐藏
					}else{
						d.style.display = "none";
						//hide变为true
						hide = true;
					}
				}
		</script>
		<style>
			.container{
				width: 100px;
				text-align: center;
			}
			.item1{
				border-style: hidden hidden solid hidden; 
				background-color:#0094ff;
            	color:White;
            	padding:2px 10px;
            	cursor:pointer;
			}
			.item2{
				display: none;
				color: #505050;
				background-color: #F0F0F0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div class="item1" title="1" onclick="showOrHide(this.title);">研发部</div>
				<div class="item2" id="d1">
					<div>研发一部<hr/></div>
					<div>研发二部<hr/></div>
					<div>研发三部<hr/></div>
				</div>
			</div>
			<div class="content">
				<div class="item1" title="2" onclick="showOrHide(this.title);">管理部</div>
				<div class="item2" id="d2">
					<div>项目管理<hr/></div>
					<div>行政管理<hr/></div>
					<div>财务管理<hr/></div>
				</div>
			</div>
			<div class="content">
				<div class="item1" title="3" onclick="showOrHide(this.title);">领导部</div>
				<div class="item2" id="d3">
					<div>老板<hr/></div>
					<div>老板娘<hr/></div>
					<div>老板的娘</div>
				</div>
			</div>
		</div>
	</body>
</html>