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

1 <div id="lists" class="collapse">
2   这里是折叠显示的内容
3 </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" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。代码示例：

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

 

转载于:https://www.cnblogs.com/wm218/p/10857813.html