折叠（collapse） - bootStrap4常用CSS笔记

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

data-toggle="collapse"	折叠触发对象必需属性
data-target="#id" | href="#id"	折叠触发对象必需属性
.collapse	折叠目标对象样式
data-parent="#id"	属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。

 

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

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，代码示例：

<div id="lists" class="collapse">
  这里是折叠显示的内容
</div>

 

完整代码：

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

 

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

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

 

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

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

<div class="container">
  <div id="area">
    <a href="#con-1" data-toggle="collapse" class="d-block">列表一</a>
    <div class="collapse" data-parent="#area" id="con-1">
       列表一内容
    </div>
    <a href="#con-2" data-toggle="collapse" class="d-block">列表二</a>
    <div class="collapse" data-parent="#area" id="con-2">
       列表二内容
    </div>
    <a href="#con-3" data-toggle="collapse" class="d-block">列表三</a>
    <div class="collapse" data-parent="#area" id="con-3">
       列表三内容
    </div>
  </div>
</div>