使用 CSS 動態調整 Bootstrap 的折疊按鈕圖示

July 17, 2018

Photo by Pankaj Patel on Unsplash

Bootstrap 提供一個內容折疊(Collapse)的功能,讓資訊可以被收合,使用方式只要透過加入 class 名稱和 data-* 屬性,詳細可以參考 Bootstrap Collapse 的 Example 範例。

最近在開發的時候遇到一個需求,需要在內容折疊的地方加上收/合的 icon,當下馬上就是想到 JavaScript 來實做這個功能,只要監聽按鈕的 click event 再去換掉 icon,後來就在想 CSS 是不是可以做到這件事,就可以不需要透過 JavaScript 來控制了(CSS 苦手 😭),後來查了一下,的確可以透過 CSS 做到這件事,而且非常容易。

加入 CSS

在 HTML 部分,使用 collapse 通常需要以下的 attribute,接著再加入兩個 icon 樣式,downup(這裡使用 fontawsome 作為範例):

<button
  class="collapse-btn"
  type="button"
  data-toggle="collapse"
  data-target="#menu"
  aria-expanded="false"
  aria-controls="menu"
>
  Collapse Button
  <i class="fa fa-angle-down fa-lg menu__icon--open"></i>
  <i class="fa fa-angle-up fa-lg menu__icon--close"></i>
</button>

<div class="collapse" id="menu">
  ...
</div>

上面的 HTML 結構,可以簡單看成如下:

<element class="collapse-btn" aria-expanded="false"><element class="menu__icon--open">
    <element class="menu__icon--close">

根據這個結構來定義 CSS,關鍵在 aria-expanded="false" 這個屬性,可以透過這個屬性的值來動態調整 icon,使用 CSS Attribute 並且加入對應的 class

[aria-expanded="false"] .menu__icon--open {
  display: inline;
}

[aria-expanded="false"] .menu__icon--close {
  display: none;
}

[aria-expanded="true"] .menu__icon--open {
  display: none;
}

[aria-expanded="true"] .menu__icon--close {
  display: inline;
}

display: inline 也可以替換成 display: block,請根據你的需求自行調整。

實際效果

Reference