jQuery实现手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.parent{
width: 200px;
text-align: center;
}
.menu{
border:1px solid #999;
background-color: #e0ecff;
}
.group{
display: block;
height:20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px solid #ccc;
}
.menu>div{
height:200px;
background-color: #fff;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
$(".group").mouseover(function(){
$(this).next().slideDown(300).parent().siblings().children("div").slideUp(300);
});
});
</script>
</head>
<body>
<ul class="parent">
<li class="menu">
<span class="group">标题1</span>
<div>我是div1</div>
</li>
<li class="menu">
<span class="group">标题1</span>
<div>我是div1</div>
</li>
<li class="menu">
<span class="group">标题1</span>
<div>我是div1</div>
</li>
<li class="menu">
<span class="group">标题1</span>
<div>我是div1</div>
</li>
</ul>
</body>
</html>
ps：$(document).ready(function(){
//jQuery入口函数
$(".group").mouseover(function(){
//鼠标进入事件
$(this).next().slideDown(300).parent().siblings().children("div").slideUp(300);
//this 指当前元素，.next指下一个元素（这里指div），.sildeDown(300)0.3秒后向下滑动显示，..parent()指group的父级元素li，.siblings()父级元素的剩下元素，.children("div")找到li元素中标签为div的子级元素，.slideUp(300)0.3秒后向上滑动，这里用到了链式编程（即方法可以一直调用下去）；
});
});
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
