html 多层展开,jquery实现同一页面多个DIV层展开收缩功能

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

1、JS代码部分：

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"});

});

});

2、HTML代码部分

jquery实现同一页面多个DIV层展开收缩，jquery实现同一页面多个DIV层显示隐藏功能，JS实现同一页面多个内容展开和收缩功能

展开