Pure CSS collapse for Website with CSS :target selector


分享如何使用 CSS Selector 製作 Pure CSS 的 Collapse 效果。

banner

在網頁開發時難免會需要製作收闔(Collapse)的可摺疊效果,如 w3schools.com 呈現的 Bootstrap Collapse範例,使用上非常簡單。

而如果我們今天想自己刻一個類似的 Collapse 其實也沒太複雜,只是會HTML醜一點。這邊就是示範如何使用CSS Selector的 :target 來實作 Collapse 效果。

CSS Selector

這邊我們會使用 CSS Selector 來幫我們實作,而由於 CSS Selector 在目前個瀏覽器的主流版本大都支援,所以很少會有相容性的問題。完整的相容性參考Browser support varies

實作請參考下方:

使用上的語意與結構不難,就是將我們原本的 href 屬性指定到特定錨點ID(如:範例的#hide, #show) 就是我們對應的 id 為 hideshow 的屬性為我們的更改目標,並套購 :target 內的 CSS 屬性值。

而第一個 css 的條件 => .details,.show,.hide:target 翻成白話為以下條件:

  • 不顯示 class 名稱為 details 的元素
  • 不顯示 class 名稱為 show 的元素
  • 不顯示 class 名稱為 hide 內的 指定的target目標 元素

而第二個 css 的條件 => #hide:target + #show,#hide:target ~ .detail 翻成白話為以下條件:

  • 顯示 id 名稱為 hide 內的 指定的target目標下 緊接著 id 名稱為 show 的元素
  • 顯示 id 名稱為 hide 內的 指定的target目標下 且包含 class 名稱為 detail 的元素

Other Alternatives

除了上面的 CSS Selector 的做法,如果不考慮部分瀏覽器的相容性(IE, Edge與Opera Mini),單用HTML5的 summarydetail 標籤就可以達成我們的需求:

光就解決辦法來看,這個寫法比較漂亮也不會撰寫重複的HTML內容。而這個解決的詳細相容性參考Browser support varies

至於選擇哪一個解法就要見仁見智瞜~!

References


作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
 上一篇
下一篇 
  目錄