本篇文章里，我們一起學(xué)習(xí)下如何使用 CSS checkbox hack 技巧制作一個響應(yīng)式的手風(fēng)琴組件，這個組件完全基于CSS，沒有JavaScript腳本，基于窗口大小進(jìn)行水平和垂直之間進(jìn)行切換。為了讓大家更好理解，我將和大家一起一步步的進(jìn)行完成。

手風(fēng)琴樣式效果：

下圖是我們要制作的手風(fēng)琴效果

本示例需要你具備一些關(guān)于flexbox的知識。

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

CSS Checkbox Hack 允許你通過復(fù)選框（Checkbox）是否選中（或單選按鈕radio buttons）來控制某些特定的樣式。這里運(yùn)用的是：checked 偽類選擇器，其意思就是”如果選中了表單（復(fù)選框、單選按鈕），則應(yīng)用相關(guān)樣式規(guī)則“

我們通常隱藏表單控件，然后結(jié)合<lable>來控制復(fù)選框或單選框的選擇，制作一些特殊的效果，因此用戶無法感知復(fù)選框的存在。

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

1、創(chuàng)建 HTML 標(biāo)記結(jié)構(gòu)

在本練習(xí)中，我們從維基百科找一些四種不同類型的內(nèi)容介紹：動物、植物、空間和河流。然后我們創(chuàng)建相應(yīng)的單選按鈕，并為其分配內(nèi)容關(guān)鍵詞：

建立無序列表

接下來，我們設(shè)置一個包含4行的無序列表，每行列表<li>包含了標(biāo)題項(xiàng)<lable>標(biāo)簽和內(nèi)容項(xiàng)<div>標(biāo)簽：

1. 首先我們在標(biāo)題選型卡外層定義標(biāo)簽，這里的關(guān)鍵所在就是這個標(biāo)簽，尤其是 for 這屬性，指向?qū)?yīng)表單的id的屬性，label 標(biāo)簽不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。這就是這個案例的關(guān)鍵所在。
2. <li>標(biāo)簽里<div>內(nèi)容，我們用來定義選項(xiàng)卡里對應(yīng)的內(nèi)容。

基于上面的思路，整理后無需列表內(nèi)容如下：

2、定義相關(guān)樣式

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

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

然后我們定義無需列表<li>標(biāo)簽的樣式，也設(shè)置其為彈性盒子布局，示例代碼如下：

為了區(qū)分每個<li> 選型，讓其有分割的感覺，我們來定義其邊框?qū)傩裕纠a如下：

每個選項(xiàng)卡容器，讓標(biāo)題默認(rèn)在縱軸上進(jìn)行布局，然后設(shè)置標(biāo)題選項(xiàng)卡的寬度為70px，以及定義鼠標(biāo)經(jīng)過的外觀樣式:

由于寬度有限，我們需要旋轉(zhuǎn)標(biāo)題文字的方向，讓其由下往上垂直顯示，示例代碼如下：

最后我們來定義選項(xiàng)卡內(nèi)容文本的樣式，我們應(yīng)該默認(rèn)第一個選項(xiàng)卡的內(nèi)容出于展示狀態(tài)，其它選項(xiàng)卡隱藏，這里我們先讓所有的選項(xiàng)卡默認(rèn)隱藏，后面我們會使用 Checkbox Hack 讓選中的選項(xiàng)卡內(nèi)容處于展示狀態(tài)。示例代碼如下：

3、Checkbox Hack: 切換選型內(nèi)容

這部分代碼就像變魔法一般，當(dāng)我們點(diǎn)擊每個標(biāo)題選型卡內(nèi)容時就響應(yīng)顯示相關(guān)內(nèi)容，這里我們使用了 :checked 偽類，以及結(jié)合 CSS的后續(xù)同胞選擇器（~）以及 緊鄰?fù)x擇器（+）。

接下來我們來動手實(shí)踐吧，為了讓對應(yīng)選中的選項(xiàng)卡內(nèi)容可見，我們使用 display: flex 讓其可見，并使用 align-items: center 屬性讓文本內(nèi)容垂直居中。同時為了讓用戶區(qū)分選中了哪個選項(xiàng)卡，我們需要定義選項(xiàng)卡出于選中狀態(tài)時的標(biāo)題顏色。

最后定義一個可選的外觀樣式，當(dāng)每個單選按鈕獲取焦點(diǎn)時，我們?yōu)閘able標(biāo)簽定義outline屬性，這個細(xì)節(jié)幫組我們增強(qiáng)組件的可訪問性。（accessibility）

以下是完成后的CSS代碼內(nèi)容：

4、響應(yīng)式處理

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

對應(yīng)的代碼如何實(shí)現(xiàn)呢？首先我們需要更改無序列表讓其為縱向分布，flex-direction: column；然后更改選型卡的標(biāo)題區(qū)域布局為橫向分布，flex-direction: row，示意代碼如下：

5、處理內(nèi)容有限的情況

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

• 我們需要在每個當(dāng)前選中狀態(tài)的選項(xiàng)卡里添加flex-grow: 1屬性，并不是所有的選項(xiàng)卡，讓當(dāng)前選中的選項(xiàng)卡里占據(jù)所有剩余寬度，我們需要在li標(biāo)簽上增加用戶自定義屬性（data-radio）方便我們來定義樣式。
• 接下來我們需要在選項(xiàng)卡的內(nèi)容部分添加 flex-grow: 1 的規(guī)則，讓選項(xiàng)卡的內(nèi)容比較少是也能占滿整個父元素容器的寬度。
• 最后為選項(xiàng)卡的內(nèi)容定添加內(nèi)容居中的屬性，示意代碼如下：justify-content: center

基于以上思路，我們調(diào)整后的html代碼如下，只是在li標(biāo)簽上增加了自定義屬性（data-radio），代碼如下：

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

最終完成的代碼

1、HTML代碼部分：

2、CSS代碼部分：

小節(jié)

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