龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > jQuery手风琴菜单(改造版)

jQuery手风琴菜单(改造版)

龙行    web前端    2019-6-16    64    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>
评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/251.html
  • 上篇文章:SSO单点登录-通俗易懂系统讲解
  • 下篇文章:jquery实现左侧伸缩菜单
  • jquery
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部