使用 CSS Checkbox Hack 技術製作一個手風琴組件

2019 年 12 月 23 日
筆記

在本篇文章里，我們一起學習下如何使用 CSS checkbox hack 技巧製作一個響應式的手風琴組件，這個組件完全基於CSS，沒有JavaScript腳本，基於窗口大小進行水平和垂直之間進行切換。為了讓大家更好理解，我將和大家一起一步步的進行完成。

手風琴樣式效果：

下圖是我們要製作的手風琴效果

本示例需要你具備一些關於flexbox的知識。

首先，我們先了解下什麼是 CSS Checkbox Hack ？

CSS Checkbox Hack 允許你通過複選框（Checkbox）是否選中（或單選按鈕radio buttons）來控制某些特定的樣式。這裡運用的是：checked 偽類選擇器，其意思就是」如果選中了表單（複選框、單選按鈕），則應用相關樣式規則「

我們通常隱藏表單控件，然後結合<lable>來控制複選框或單選框的選擇，製作一些特殊的效果，因此用戶無法感知複選框的存在。

這是我的最愛，不僅可以完成本文的例子，還會製作一些更有趣例子，稍後會介紹到。

1、創建 HTML 標記結構

在本練習中，我們從維基百科找一些四種不同類型的內容介紹：動物、植物、空間和河流。然後我們創建相應的單選按鈕，並為其分配內容關鍵詞：

建立無序列表

接下來，我們設置一個包含4行的無序列表，每行列表<li>包含了標題項<lable>標籤和內容項<div>標籤：

首先我們在標題選型卡外層定義標籤，這裡的關鍵所在就是這個標籤，尤其是 for 這屬性，指向對應表單的id的屬性，label 標籤不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。這就是這個案例的關鍵所在。
<li>標籤里<div>內容，我們用來定義選項卡里對應的內容。

基於上面的思路，整理後無需列表內容如下：

2、定義相關樣式

準備好上述的HTML內容後，我們來定義相關樣式，首先我們需要隱藏我們的幾個單選按鈕，我們可以使用left屬性，將其移除屏幕顯示區域，示例代碼如下：

接下來我們來定義手風琴整體外觀布局，讓其具有響應式，用到了彈性盒子布局，設置display:flex, 同時又應用到了CSS的自定義變量新屬性，方便我們進行統一設置和修改，示例代碼如下：

然後我們定義無需列表<li>標籤的樣式，也設置其為彈性盒子布局，示例代碼如下：

為了區分每個<li> 選型，讓其有分割的感覺，我們來定義其邊框屬性，示例代碼如下：

每個選項卡容器，讓標題默認在縱軸上進行布局，然後設置標題選項卡的寬度為70px，以及定義鼠標經過的外觀樣式:

由於寬度有限，我們需要旋轉標題文字的方向，讓其由下往上垂直顯示，示例代碼如下：

最後我們來定義選項卡內容文本的樣式，我們應該默認第一個選項卡的內容出於展示狀態，其它選項卡隱藏，這裡我們先讓所有的選項卡默認隱藏，後面我們會使用 Checkbox Hack 讓選中的選項卡內容處於展示狀態。示例代碼如下：

3、Checkbox Hack: 切換選型內容

這部分代碼就像變魔法一般，當我們點擊每個標題選型卡內容時就響應顯示相關內容，這裡我們使用了 :checked 偽類，以及結合 CSS的後續同胞選擇器（~）以及緊鄰同胞選擇器（+）。

接下來我們來動手實踐吧，為了讓對應選中的選項卡內容可見，我們使用 display: flex 讓其可見，並使用 align-items: center 屬性讓文本內容垂直居中。同時為了讓用戶區分選中了哪個選項卡，我們需要定義選項卡出於選中狀態時的標題顏色。

最後定義一個可選的外觀樣式，當每個單選按鈕獲取焦點時，我們為lable標籤定義outline屬性，這個細節幫組我們增強組件的可訪問性。（accessibility）

以下是完成後的CSS代碼內容：

4、響應式處理

接下來我們來處理下，在小屏或可視窗口低於 650px 的情況，幸虧我們使用了彈性盒子布局，在這種情況下，我們讓手風琴垂直顯示，也就是每個選項卡縱向分佈，每個選項卡的標題內容橫向分佈。示意圖效果如下：

對應的代碼如何實現呢？首先我們需要更改無序列表讓其為縱向分佈，flex-direction: column；然後更改選型卡的標題區域布局為橫向分佈，flex-direction: row，示意代碼如下：

5、處理內容有限的情況

在我們的案例中，每個選項卡的內容都很多，看起來很漂亮。但是為了確保沒有足夠內容支撐時，手風琴效果不走樣，我們需要進行一些樣式上的特殊處理，效果如下圖所示：

我們需要在每個當前選中狀態的選項卡里添加flex-grow: 1屬性，並不是所有的選項卡，讓當前選中的選項卡里佔據所有剩餘寬度，我們需要在li標籤上增加用戶自定義屬性（data-radio）方便我們來定義樣式。
接下來我們需要在選項卡的內容部分添加 flex-grow: 1 的規則，讓選項卡的內容比較少是也能佔滿整個父元素容器的寬度。
最後為選項卡的內容定添加內容居中的屬性，示意代碼如下：justify-content: center

基於以上思路，我們調整後的html代碼如下，只是在li標籤上增加了自定義屬性（data-radio），代碼如下：

CSS部分修部分的代碼如下：

最終完成的代碼

1、HTML代碼部分：

2、CSS代碼部分：

小節

今天的案例就和大家聊到這裡，通過本文，我們一起學習了如何使用 CSS checkbox hack 技術完成了一個純CSS手風琴效果， CSS checkbox hack 不僅能做手風琴效果，還有更多有趣的效果等待你挖掘，比如實現常見的導航切換、點擊按鈕彈出層的效果，不用寫一行JS代碼，是不是覺得CSS很神奇呢，在接下來的文章，我將會給大家繼續分享 CSS checkbox hack 的案例，敬請期待。