html 列表实现展开和收起,实现列表展开收起效果

$(".btn").click(function () {

$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");

});

css：

.最外层div class .需要收起展开的div的class{

display: none;

}

.showDiv .需要收起展开的div的class{

display: block;

}

实现思路：通过动态的添加showDiv 这个class实现列表的展开收起

demo:

html:

今日头条

按钮

需要展开收起的内容

今日头条

按钮

需要展开收起的内容

css:

.none{

display:none;

}

.aa .aa-cont {

display: none;

}

.showDiv .aa-cont {

display: block;

}

js:

$(".btn").click(function () {

$(this).parents(".aa").toggleClass("showDiv").siblings().removeClass("showDiv");

});

这个方法还是比较简单易懂的。