您的位置：首页 > 其它

jq实现手风琴效果

2018-01-19 11:11 351 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.3.js"></script>
<style>
body,ul,div,li{
margin:0;
padding: 0;
}
.ac{
list-style: none;
width: 200px;
border:1px solid #333333;

4000
}
.ac-item-hd{
height: 50px;
line-height: 50px;
background: #fafaaf;
text-align: center;
cursor: pointer;
border: 1px solid #aaaaaa;
}
.ac-item-hd:hover{
background-color: transparent;
}
.ac-item-bd{
height: 100px;
display: none;
}
.on .ac-item-bd{
display:block;
}
</style>
</head>
<body>
<ul class="ac">
<li class="ac-item on">
<div class="ac-item-hd">头部</div>
<div class="ac-item-bd">内容</div>
</li>
<li class="ac-item">
<div class="ac-item-hd">头部</div>
<div class="ac-item-bd">内容</div>
</li>
<li class="ac-item">
<div class="ac-item-hd">头部</div>
<div class="ac-item-bd">内容</div>
</li>
<li class="ac-item">
<div class="ac-item-hd">头部</div>
<div class="ac-item-bd">内容</div>
</li>
</ul>
<script>
$(".ac").on("click","li",function () {
$(this).addClass("on").siblings().removeClass("on");
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航