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>元素来控制显⽰/隐藏⼀个元素
可以在<button>或者<a>标签上，通过 JQuery选择器来显⽰和隐藏多个元素
素）），如果被引⽤对象的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(options)：
.collapse('toggle')：
.collapse('toggle')：即发⽣llapse或llapse事件前)返回给调⽤者。
在可折叠元素实际显⽰之前(即llapse事件发⽣之前)返回给调⽤者。
.collapse('show')：
.collapse('show')：显⽰可折叠元素，在可折叠元素实际显⽰之前
在可折叠元素实际上被隐藏之前(即llapse事件发⽣之前)返回给调⽤者。.collapse('hide')：隐藏可折叠元素，在可折叠元素实际上被隐藏之前
.collapse('hide')：
.collapse('dispose')：销毁⼀个元素的折叠。
.collapse('dispose')：
事件：
事件类型描述
llapse当调⽤show ⽅法时，会⽴即触发事件。
llapse⽤户可见折叠⾯板中的块时，会触发此事件（需要等CSS加载过渡完成）。
llapse当调⽤hide ⽅法时，⽴即触发该事件。
llapse当折叠⾯板中的块对于⽤户完全隐藏时（需要等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="stackpath.bootstrapcdn/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="code.jquery/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="stackpath.bootstrapcdn/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('llapse', function () {
console.log('显⽰事件发⽣了'); //当调⽤show的⽅法的时候会触发此事件 });
$('#myCollapse').on('llapse', function () {
console.log('隐藏事件发⽣了'); //当调⽤hide的⽅法的时候会触发此事件 });
$('#myCollapse').on('llapse', function () {
console.log('折叠块完全显⽰了！');
});
$('#myCollapse').on('llapse', function () {
jquery是什么选择器console.log('折叠块完全隐藏了！');
});
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论