Bootstrap4组件：折叠面板(Collapse)


发布时间：2020-03-20 16:32    作者： 晖哥哥   已过去：2 年，2 月   阅读总量：1654 已被赞：0

折叠面板(Collapse)

示例

点击下面任何一个按钮，通过类更改显示和隐藏另一个class包含的元素：

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

你可以使用带href 属性的连接,、或者带 data-target 属性的按钮来创建折叠效果-这两种情况下 data-toggle="collapse" 属性都是必须的。

<p>

<a href="#myCollapse" class="btn btn-primary" data-toggle="collapse">btn1</a>

<button class="btn btn-primary" data-toggle="collapse" data-target="#myCollapse">btn2</button>

</p>

<div class="collapse" id="myCollapse">

<div class="card card-body">

aaaaaa

</div>

</div>

多目标控制（指定相同的class就行，不用ID了）

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

<p>

<a href=".myCol" class="btn btn-primary" data-toggle="collapse">btn1</a>

<button class="btn btn-primary" data-toggle="collapse" data-target=".myCol">btn2</button>

</p>

<div class="row">

<div class="col">

<div class="collapse myCol">

<div class="card card-body">

aaaaaa

</div>

</div>

</div>

<div class="col">

<div class="collapse myCol">

<div class="card card-body">

bbbbbb

</div>

</div>

</div>

</div>

手风琴折叠范例

结合 card 卡片组件使用，可以扩展折叠组件为手风琴效果。

<div id="accordion">

<div class="card">

<div class="card-header">

<h5 class="mb-0">

<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">选项一</button>

</h5>

</div>

<div class="collapse show" id="collapseOne" data-parent="#accordion">

<div class="card-body">

aaaaaa

</div>

</div>

</div>

 

<div class="card">

<div class="card-header">

<h5 class="mb-0">

<button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo">选项二</button>

</h5>

</div>

<div class="collapse" id="collapseTwo" data-parent="#accordion">

<div class="card-body">

bbbbbb

</div>

</div>

</div>

 

<div class="card">

<div class="card-header">

<h5 class="mb-0">

<button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree">选项三</button>

</h5>

</div>

<div class="collapse" id="collapseThree" data-parent="#accordion">

<div class="card-body">

cccccc

</div>

</div>

</div>

</div>

你也可以使用自定义样式创建手风琴效果，只要添加 data-children 属性，并指定一组相邻元素来切换(如.item)，然后使用与上述相同的属性和class，来切换/隐藏其关联的内容。

<div id="accordion" data-children=".item">

<div class="item">

<a href="#collapseOne" data-toggle="collapse">选项一</a>

<div class="collapse show" id="collapseOne" data-parent="#accordion">

<p>

aaaaaa

</p>

</div>

</div>

<div class="item">

<a href="#collapseTwo" data-toggle="collapse">选项二</a>

<div class="collapse" id="collapseTwo" data-parent="#accordion">

<p>

bbbbbb

</p>

</div>

</div>

<div class="item">

<a href="#collapseThree" data-toggle="collapse">选项三</a>

<div class="collapse" id="collapseThree" data-parent="#accordion">

<p>

cccccc

</p>

</div>

</div>

</div>

JavaScript 行为

方法

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

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

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

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

事件

事件类别

描述

show.bs.collapse

当调用show 方法时，会立即触发事件。

shown.bs.collapse

用户可见折叠面板中的块时，会触发此事件（需要等CSS加载过渡完成）。

hide.bs.collapse

当调用hide 方法时，立即触发该事件。

hidden.bs.collapse

当折叠面板中的块对于用户完全隐藏时（需要等CSS加载过渡完成），会触发该事件）。

点赞

0


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐