Bootstrap折疊板插件允許你在網(wǎng)頁(yè)中用一點(diǎn)點(diǎn)JavaScript以及CSS類(lèi)切換內(nèi)容，控制內(nèi)容的可見(jiàn)性。它是一個(gè)靈活的插件，使用少量的類(lèi)（來(lái)自必需的過(guò)渡插件），以方便切換行為。

運(yùn)作方式

插件用于顯示和隱藏內(nèi)容。 按鈕或錨點(diǎn)用作觸發(fā)器，映射到您切換的特定元素。 折疊元素會(huì)將height從其當(dāng)前值設(shè)置為0。使用CSS處理動(dòng)畫(huà)的方式，您不能在.collapse上使用padding相反，使用該類(lèi)作為獨(dú)立的包裝元素。

示例

• .collapse 隱藏內(nèi)容
• .collapsing 帶動(dòng)態(tài)效果的切換
• .collapse.show 顯示內(nèi)容

你可以使用帶href屬性的連接,、或者帶data-target屬性的按鈕來(lái)創(chuàng)建折疊效果-這兩種情況下data-toggle="collapse"屬性都是必須的。

<div class="row mt-5"><div class="col"><p><a href="#kengdie" class="btn btn-primary" data-toggle="collapse">坑爹</a><button class="btn btn-primary" data-toggle="collapse" data-target="#kengdie">坑爹</button></p><div class="collapse show" id="kengdie"><div class="card card-body">坑爹一般用于諷刺、嘲笑或吐槽不滿(mǎn)。意指與本人意愿有很大出入，有欺騙的意思，又包含了幾絲“不給力”的意思成分。該網(wǎng)絡(luò)用語(yǔ)“坑爹”一詞最早出現(xiàn)于網(wǎng)絡(luò)游戲魔獸世界。</div></div></div> </div>

多目標(biāo)控制

可以在<button>或者<a>標(biāo)簽上，通過(guò) JQuery選擇器來(lái)顯示和隱藏多個(gè)元素（或者多個(gè)<button>、<a>元素來(lái)控制顯示/隱藏一個(gè)元素素）），如果被引用對(duì)象的href或者data-target屬性定義正確。

<!-- 多個(gè)目標(biāo) --> <div class="row mt-5"><div class="col-12"><p><a href="#diaosi" class="btn btn-primary" data-toggle="collapse">屌絲</a><button class="btn btn-primary" data-toggle="collapse" data-target="#tuhao">土豪</button><button class="btn btn-primary" data-toggle="collapse" data-target="#nvshen">女神</button><button class="btn btn-primary" data-toggle="collapse" data-target=".all">控制全部</button></p></div><div class="col-4 collapse all" id="diaosi"><div class="card card-body">屌絲 [1]來(lái)源于中國(guó)大陸地區(qū)的中國(guó)網(wǎng)絡(luò)文化。表達(dá)意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語(yǔ)，多用于熟人之間互侃或者互貶。同時(shí)指的是比喻自嘲。多用自嘲來(lái)活躍氣氛，屌絲一詞傳用至今已無(wú)特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div><div class="col-4 collapse all" id="tuhao"><div class="card card-body">土豪，網(wǎng)絡(luò)用語(yǔ)。原指鄉(xiāng)下財(cái)大氣粗、沒(méi)什么品味的有錢(qián)人，現(xiàn)多指有錢(qián)、不理性消費(fèi)、喜歡炫耀的人。出自《宋書(shū)·殷琰傳》：“叔寶者，杜坦之子，既土豪鄉(xiāng)望，內(nèi)外諸軍事并專(zhuān)之。”</div></div><div class="col-4 collapse all" id="nvshen"><div class="card card-body">女神是一個(gè)漢語(yǔ)詞語(yǔ)，拼音是nǚshén，意思指對(duì)女性的神明或至尊的稱(chēng)謂，特指神話傳說(shuō)中的女性至高者。后來(lái)引申為容貌漂亮、具有智慧、優(yōu)雅、貞潔以及高素質(zhì)的女性。在現(xiàn)代社會(huì)，女神常用來(lái)定義男性心目中喜愛(ài)，但難以成為真正戀愛(ài)對(duì)象的女生。</div></div> </div>

手風(fēng)琴折疊范例

<!-- 手風(fēng)琴 --> <div class="row mt-5"><div class="accordion" id="accordion"><!-- 第一項(xiàng) --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item1">屌絲</button></div><div class="collapse show" id="item1" data-parent="#accordion"><div class="card-body">屌絲 [1]來(lái)源于中國(guó)大陸地區(qū)的中國(guó)網(wǎng)絡(luò)文化。表達(dá)意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語(yǔ)，多用于熟人之間互侃或者互貶。同時(shí)指的是比喻自嘲。多用自嘲來(lái)活躍氣氛，屌絲一詞傳用至今已無(wú)特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div><!-- 第二項(xiàng) --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item2">土豪</button></div><div class="collapse" id="item2" data-parent="#accordion"><div class="card-body">屌絲 [1]來(lái)源于中國(guó)大陸地區(qū)的中國(guó)網(wǎng)絡(luò)文化。表達(dá)意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語(yǔ)，多用于熟人之間互侃或者互貶。同時(shí)指的是比喻自嘲。多用自嘲來(lái)活躍氣氛，屌絲一詞傳用至今已無(wú)特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div><!-- 第三項(xiàng) --><div class="card"><div class="card-header"><button class="btn btn-link" data-toggle="collapse" data-target="#item3">女神</button></div><div class="collapse" id="item3" data-parent="#accordion"><div class="card-body">屌絲 [1]來(lái)源于中國(guó)大陸地區(qū)的中國(guó)網(wǎng)絡(luò)文化。表達(dá)意思是諷刺；另一意思是指喻不方便明言或不合適直言的隱語(yǔ)，多用于熟人之間互侃或者互貶。同時(shí)指的是比喻自嘲。多用自嘲來(lái)活躍氣氛，屌絲一詞傳用至今已無(wú)特定人群的界限，多用于朋友，熟人之間的戲侃。</div></div></div></div> </div>

js的方法與事件 $('.collapse').collapse()

方法：

.collapse(options)：啟用你的可折疊對(duì)象，通過(guò)object方法。

.collapse('toggle')：即發(fā)生shown.bs.collapse或hidden.bs.collapse事件前)返回給調(diào)用者。

.collapse('show')：顯示可折疊元素，在可折疊元素實(shí)際顯示之前(即shown.bs.collapse事件發(fā)生之前)返回給調(diào)用者。

.collapse('hide')：隱藏可折疊元素，在可折疊元素實(shí)際上被隱藏之前(即hidden.bs.collapse事件發(fā)生之前)返回給調(diào)用者。

.collapse('dispose')：銷(xiāo)毀一個(gè)元素的折疊。

事件：

事件類(lèi)型描述

show.bs.collapse	當(dāng)調(diào)用show 方法時(shí)，會(huì)立即觸發(fā)事件。
shown.bs.collapse	用戶(hù)可見(jiàn)折疊面板中的塊時(shí)，會(huì)觸發(fā)此事件（需要等CSS加載過(guò)渡完成）。
hide.bs.collapse	當(dāng)調(diào)用hide 方法時(shí)，立即觸發(fā)該事件。
hidden.bs.collapse	當(dāng)折疊面板中的塊對(duì)于用戶(hù)完全隱藏時(shí)（需要等CSS加載過(guò)渡完成），會(huì)觸發(fā)該事件）。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Bootstrap中折疊面板的樣式內(nèi)容</title> </head><body><div class="container"><!-- js的方法與事件 --><div class="row mt-5"><div class="col"><p><a href="javascript:;" class="btn btn-primary myBtn">坑爹</a></p><div class="collapse show" id="myCollapse"><div class="card card-body">坑爹一般用于諷刺、嘲笑或吐槽不滿(mǎn)。意指與本人意愿有很大出入，有欺騙的意思，又包含了幾絲“不給力”的意思成分。該網(wǎng)絡(luò)用語(yǔ)“坑爹”一詞最早出現(xiàn)于網(wǎng)絡(luò)游戲魔獸世界。</div></div></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>$('.myBtn').click(function () {//$('#myCollapse').collapse('hide');//$('#myCollapse').collapse('show');$('#myCollapse').collapse('toggle');});//事件$('#myCollapse').on('show.bs.collapse', function () {console.log('顯示事件發(fā)生了'); //當(dāng)調(diào)用show的方法的時(shí)候會(huì)觸發(fā)此事件});$('#myCollapse').on('hide.bs.collapse', function () {console.log('隱藏事件發(fā)生了'); //當(dāng)調(diào)用hide的方法的時(shí)候會(huì)觸發(fā)此事件});$('#myCollapse').on('shown.bs.collapse', function () {console.log('折疊塊完全顯示了！');});$('#myCollapse').on('hidden.bs.collapse', function () {console.log('折疊塊完全隱藏了！');});</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。