bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容

Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。

运作方式

插件用于显示和隐藏内容。按钮或锚点用作触发器，映射到您切换的特定元素。折叠元素会将height从其当前值设置为0。使用CSS处理动画的方式，您不能在.collapse上使用padding相反，使用该类作为独立的包装元素。

示例

.collapse 隐藏内容
.collapsing 带动态效果的切换
.collapse.show 显示内容

你可以使用带href属性的连接,、或者带data-target属性的按钮来创建折叠效果-这两种情况下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">坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。</div></div></div>
</div>

多目标控制

可以在<button>或者<a>标签上，通过 JQuery选择器来显示和隐藏多个元素（或者多个<button>、<a>元素来控制显示/隐藏一个元素素）），如果被引用对象的href或者data-target属性定义正确。

<!-- 多个目标 -->
<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]来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。</div></div><div class="col-4 collapse all" id="tuhao"><div class="card card-body">土豪，网络用语。原指乡下财大气粗、没什么品味的有钱人，现多指有钱、不理性消费、喜欢炫耀的人。出自《宋书·殷琰传》：“叔宝者，杜坦之子，既土豪乡望，内外诸军事并专之。”</div></div><div class="col-4 collapse all" id="nvshen"><div class="card card-body">女神是一个汉语词语，拼音是nǚshén，意思指对女性的神明或至尊的称谓，特指神话传说中的女性至高者。后来引申为容貌漂亮、具有智慧、优雅、贞洁以及高素质的女性。在现代社会，女神常用来定义男性心目中喜爱，但难以成为真正恋爱对象的女生。</div></div>
</div>

手风琴折叠范例

<!-- 手风琴 -->
<div class="row mt-5"><div class="accordion" id="accordion"><!-- 第一项 --><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]来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。</div></div></div><!-- 第二项 --><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]来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。</div></div></div><!-- 第三项 --><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]来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。</div></div></div></div>
</div>

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

方法：

.collapse(options)：启用你的可折叠对象，通过object方法。

.collapse('toggle')：即发生shown.bs.collapse或hidden.bs.collapse事件前)返回给调用者。

.collapse('show')：显示可折叠元素，在可折叠元素实际显示之前(即shown.bs.collapse事件发生之前)返回给调用者。

.collapse('hide')：隐藏可折叠元素，在可折叠元素实际上被隐藏之前(即hidden.bs.collapse事件发生之前)返回给调用者。

.collapse('dispose')：销毁一个元素的折叠。

事件：

事件类型	描述
show.bs.collapse	当调用show 方法时，会立即触发事件。
shown.bs.collapse	用户可见折叠面板中的块时，会触发此事件（需要等CSS加载过渡完成）。
hide.bs.collapse	当调用hide 方法时，立即触发该事件。
hidden.bs.collapse	当折叠面板中的块对于用户完全隐藏时（需要等CSS加载过渡完成），会触发该事件）。

<!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中折叠面板的样式内容</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">坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。</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('显示事件发生了');   //当调用show的方法的时候会触发此事件});$('#myCollapse').on('hide.bs.collapse', function () {console.log('隐藏事件发生了');  //当调用hide的方法的时候会触发此事件});$('#myCollapse').on('shown.bs.collapse', function () {console.log('折叠块完全显示了！');});$('#myCollapse').on('hidden.bs.collapse', function () {console.log('折叠块完全隐藏了！');});</script>
</body></html>