jQuery手风琴菜单(改造版)

现在位置：首页 > 编程语言 > web前端 > jQuery手风琴菜单(改造版)

jQuery手风琴菜单(改造版)

龙行 web前端 2019-6-16 514 0评论

<!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 {
wifth: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>

评论一下分享本文赞助站长