折叠(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>

 

posted @ 2019-05-13 17:21 网申 阅读(...) 评论(...) 编辑 收藏