实现列表展开收起效果

时间：2018-05-17 15:17:15 阅读：133 评论：0 收藏：0 [点我收藏+]

$(".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:
<div class="aa">
<div class="bb">今日头条</div>
<div class="btn">按钮</div>
<div class="aa-cont none">需要展开收起的内容</div>
</div>
<div class="aa">
<div class="bb">今日头条</div>
<div class="btn">按钮</div>
<div class="aa-cont none">需要展开收起的内容</div>
</div>
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");
});
这个方法还是比较简单易懂的。

实现列表展开收起效果

标签：实现列表展开收起效果

原文地址：http://blog.51cto.com/769961/2117406

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行