折疊（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>