折叠，collapse - bootStrap4常用CSS笔记

【折叠】可以很容易的实现内容的显示与隐藏。

触发元素要设置以下属性：

data-toggle = "collapse"

data-target = "#id" 或者链接的href代替此属性 href="#id"

触发下拉元素代码示例：

<!-- 要折叠的容器ID：lists -->
<button data-toggle="collapse" data-target="#lists">折叠</button>
<!-- 或者 -->
<a data-toggle="collapse" href="#lists">折叠</a>

折叠元素设置样式为: collapse，代码示例：

1 <div  class="collapse">
2   这里是折叠显示的内容
3 </div>

完整代码：

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary" >折叠</button>
<div  class="collapse">
  这里是折叠显示的内容
</div>

默认折叠内容是隐藏的，如果要默认显示，需要加上show样式，如下：

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary">折叠</button>
<div  class="collapse show">
  这里是折叠显示的内容
</div>

如果想使某一对象显示时，其它对象隐藏，需要使用 data-parent="#id" 属性

data-parent ="#id" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。代码示例：

 1 <div class="container">
 2   <div >
 3     <a href="#con-1" data-toggle="collapse" class="d-block">列表一</a>
 4     <div class="collapse" data-parent="#area" >
 5        列表一内容
 6     </div>
 7     <a href="#con-2" data-toggle="collapse" class="d-block">列表二</a>
 8     <div class="collapse" data-parent="#area" >
 9        列表二内容
10     </div>
11     <a href="#con-3" data-toggle="collapse" class="d-block">列表三</a>
12     <div class="collapse" data-parent="#area" >
13        列表三内容
14     </div>
15   </div>
16 </div>