<div class="panel">
???<div class="panel-header">
??????jQuery的核心特性
???</div>
???<div class="panel-body">
??????jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
???</div>
???<div class="panel-header">jQuery团队</div>
???<div class="panel-body">
?????2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。
???</div>
???<div class="panel-header">jQuery 1.4.2版发布</div>
???<div class="panel-body">
??????2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便，而且也可以达到动态添加事件的作用。
???</div>
</div>
<style>
.panel-body {
border:1px solid #ddd;
border-radius:3px;
background:#33ff33;
width:400px;
}
.panel-body:not(:nth-child(2)) {
display:none;
}
</style>
<script>
$(".panel").on("click", ".panel-header", function() {
????var next = $(this).next();
????next.slideToggle("slow");
????$(".panel-body").not(next).slideUp();
})
</script>
link：http://www.jq22.com/webqd1853
jQuery实现手风琴效果
原文地址：https://www.cnblogs.com/weibo806/p/9927244.html