Bootstrap4组件:折叠面板(Collapse)


发布时间:2020-03-20 16:32    作者: Uncle Hui   已过去:2 月,2 周   阅读总量:149 已被赞: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




登陆后方可评论