点击下面任何一个按钮,通过类更改显示和隐藏另一个class包含的元素:
你可以使用带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> |
可以在<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> |
(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
登陆后方可评论