jQuery手风琴菜单(改造版)

小小博主 共825人围观 0个不明物体

48036b0bb0fc3e7f63e6bb9517e21e67.png

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>伸缩菜单demo</title>
<style>
body { font:16px "Microsoft YaHei",sans-serif; }
ul { list-style: none; margin:0; padding : 0; display: none; }
a { text-decoration: none; }
.nav-list { width:220px; }
.nav-list h3 {
	width:220px;
	margin:0;
	padding:10px 20px;
	font-size:16px;
	line-height: 20px;
	font-weight: normal;
	color: #fff;
	background-color: #333;
	border-top: 1px solid #ccc;
	cursor:pointer;
}
.nav-list ul li { width : 259px; }
.nav-list h3 span {
	position : absolute;
	right: 20px;
	top:14px;
	width:12px;
	height:12px;
	background: url("zuo.png")no-repeat;
}
.nav-list h3.open span { background: url("shang.png")no-repeat; }
.nav-list h3:hover { background-color: #222; }
.nav-list li a {
	display: block;
	padding: 10px 20px;
	background-color: #f5f5f5;
	border:1px solid #ccc;
	border-bottom:none;
	color:#333;
	font-size:13px;
}
.nav-list li a:hover { background-color: #ccc; }
</style>
</head>

<body>
<div class="nav-list">
	<h3>选择器 <span></span></h3>
	<ul>
		<li><a href="#">id选择器</a></li>
		<li><a href="#">标签选择器</a></li>
		<li><a href="#">类选择器</a></li>
		<li><a href="#">子类选择器</a></li>
	</ul>
	<h3>会员管理<span></span></h3>
	<ul>
		<li><a href="#">会员列表</a></li>
		<li><a href="#">会员添加</a></li>
		<li><a href="#">会员删除</a></li>
	</ul>

	<h3>权限管理<span></span></h3>
	<ul>
		<li><a href="#">权限添加</a></li>
		<li><a href="#">权限删除</a></li>
		<li><a href="#">角色列表</a></li>
	</ul>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".nav-list h3").first().addClass("open").next("ul").show(); //第一个展开
	//还可以是鼠标放入元素触发
	//click()点击触发
	//mouseenter()鼠标放入元素触发
	$('.nav-list h3').mouseenter(function(){
	$(this)  //当前点击的H3
	//.addClass("open") //当前H3天假class open
	.toggleClass("open")
	.siblings("h3") 
	.removeClass("open")  //其他h3 删除open类
	.end() //返回 $(this)
	.next("ul") 
	//.slideDown() //当前h3 后面ul显示 
	.slideToggle()
	.siblings("ul")
	.slideUp(); //其他ul隐藏
	})
})
</script>
</body>
</html>
阅读更多
赏