【折叠】可以很容易的实现内容的显示与隐藏。
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>