这里来给大家分享一下jquery实现同一页面多个DIV层展开收缩的功能，一个朋友让帮助他实现这个功能，上网查了很久，没有找到相关的答案，最后借助一篇网上的文章经过修改实现了这个功能，需要的网友可以拿去用，代码如下。

1、JS代码部分：

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var slideHeight = 50; // px
 $(function() {
  $(".list").each(function() {
   if($(this).height() >= 50) {
    $(this).css('height' , slideHeight + 'px');
   }else{
    $(this).next(".more").hide();
   }
  });
  $(".more-btn").toggle(function(){
   $(this).html("收缩");
   $(this).parent().prev(".list").css({"height":"auto","overflow":"visible"});
  },function(){
   $(this).html("展开");
   $(this).parent().prev(".list").css({"height":slideHeight,"overflow":"hidden"});
  });
 });                     
</script>

2、HTML代码部分

<div class="list" >jquery实现同一页面多个DIV层展开收缩，jquery实现同一页面多个DIV层显示隐藏功能，JS实现同一页面多个内容展开和收缩功能</div>
<div class="more"><a class="more-btn"  href="#">展开</a></div>