jQuery手风琴菜单(改造版)
<!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>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
- 本文网址:https://www.liaotaoo.cn/251.html
- 上篇文章:SSO单点登录-通俗易懂系统讲解
- 下篇文章:jquery实现左侧伸缩菜单