$(".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");
});
這個方法還是比較簡單易懂的。
實現列表展開收起效果
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
交換路由實現全網互通
程張飛
2019-02-23 13:37:42
下拉框的實現
xp329486175
2019-02-23 13:12:30
API HOOK的實現原理
小樹皮
2019-02-23 12:57:20
讓兩臺主機通過四個路由器互通
水柔山
2019-02-23 00:40:07
使用Keepalived實現雙機熱備
湯小洋
2019-02-23 00:32:11
本科理工男如何學習Linux
揚那個楊
2019-02-23 00:22:13
MySQL中mmm實現高可用羣集
涼夏了夏天
2019-02-23 00:19:27
Linux服務器間文件實時同步的實現
dolunbu
2019-02-23 00:04:42
CISCO路由器訪問控制列表---之經理權利
zhanglong0123
2019-02-23 13:29:47
Python基礎學習(三)
ToFgetU
2019-02-23 00:39:19
電信網通全國DNS 列表
kfming
2019-02-23 00:06:46
python基本數據類型
ok庫
2019-02-22 23:59:18
python入門:列表和元組
小白進化史
2019-02-22 23:57:38