<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<style>
ul{
list-style-type: none;
}
.parentWarp{
width: 200px;
text-align: center;
}
.menuGroup{
border:1px #999 solid;
background-color: deepskyblue;
}
.grounpTitle{
display: block;
height: 20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px #ccc solid;
cursor: pointer;
}
.parentWarp div{
height: 200px;
background-color: cornflowerblue;
display: none;
}
</style>
<script>
$(function () {
//思路:
//span注册click事件,点击span,打开兄弟div,其他的div收缩
$(".grounpTitle").click(function () {
//next() 相邻节点
//siblings() 所有兄弟节点 前后都找到
//链式编程
$(this).next().slideDown(500).parent().siblings().children("div").slideUp(500);
});
})
</script>
</head>
<body>
<ul class="parentWarp">
<li class="menuGroup">
<span class="grounpTitle">系统设置</span>
<div>我是菜单内容</div>
</li>
<li class="menuGroup">
<span class="grounpTitle">用户维护</span>
<div>我是菜单内容</div>
</li>
<li class="menuGroup">
<span class="grounpTitle">商品管理</span>
<div>我是菜单内容</div>
</li>
<li class="menuGroup">
<span class="grounpTitle">订单管理</span>
<div>我是菜单内容</div>
</li>
<li class="menuGroup">
<span class="grounpTitle"> 关于我们</span>
<div>我是菜单内容</div>
</li>
</ul>
</body>
</html>
js-手风琴式菜单
最新推荐文章于 2022-03-20 10:56:47 发布