.jpg)
使用css制作折疊面板的核心是利用radio或checkbox狀態(tài)配合兄弟選擇器和transition屬性實(shí)現(xiàn)動(dòng)畫(huà)；2. 優(yōu)化動(dòng)畫(huà)效果可通過(guò)過(guò)渡padding、margin及選擇合適的transition-timing-function；3. 實(shí)現(xiàn)多個(gè)面板同時(shí)展開(kāi)應(yīng)使用checkbox代替radio；4. 提升無(wú)障礙性需使用語(yǔ)義化html、鍵盤(pán)可訪問(wèn)性和aria屬性，并結(jié)合JavaScript控制狀態(tài)。
css制作折疊面板，核心在于利用CSS的radio或checkbox狀態(tài)配合兄弟選擇器或偽類(lèi)選擇器，以及transition屬性實(shí)現(xiàn)平滑的展開(kāi)/收起動(dòng)畫(huà)效果。關(guān)鍵在于控制內(nèi)容區(qū)域的height或max-height屬性。
解決方案：
首先，我們需要一個(gè)HTML結(jié)構(gòu)，包含標(biāo)題和內(nèi)容區(qū)域。可以利用或者來(lái)控制面板的顯示狀態(tài)。然后，使用CSS來(lái)隱藏內(nèi)容區(qū)域，并通過(guò):checked偽類(lèi)選擇器來(lái)改變內(nèi)容區(qū)域的height或max-height，從而實(shí)現(xiàn)展開(kāi)/收起的效果。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
<div class="accordion"> <input type="radio" name="accordion" id="panel1" checked> <label for="panel1">面板一標(biāo)題</label> <div class="content"> 面板一內(nèi)容：這里是面板一的詳細(xì)信息。 </div> <input type="radio" name="accordion" id="panel2"> <label for="panel2">面板二標(biāo)題</label> <div class="content"> 面板二內(nèi)容：這里是面板二的詳細(xì)信息。 </div> <input type="radio" name="accordion" id="panel3"> <label for="panel3">面板三標(biāo)題</label> <div class="content"> 面板三內(nèi)容：這里是面板三的詳細(xì)信息。 </div> </div>
.accordion { width: 300px; } .accordion input { display: none; /* 隱藏 radio 按鈕 */ } .accordion label { display: block; padding: 10px; background-color: #eee; cursor: pointer; border-bottom: 1px solid #ccc; } .accordion .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; /* 添加過(guò)渡效果 */ padding: 0 10px; } .accordion input:checked + label { background-color: #ddd; } .accordion input:checked + label + .content { max-height: 500px; /* 設(shè)置一個(gè)足夠大的值，確保內(nèi)容完全顯示 */ padding: 10px; /* 展開(kāi)時(shí)顯示內(nèi)邊距 */ }
如果使用checkbox，則CSS可以稍微簡(jiǎn)化，不需要考慮互斥選擇的問(wèn)題。
如何優(yōu)化CSS折疊面板的動(dòng)畫(huà)效果？
優(yōu)化動(dòng)畫(huà)效果的關(guān)鍵在于transition屬性。除了max-height之外，還可以同時(shí)過(guò)渡padding和margin等屬性，讓展開(kāi)/收起過(guò)程更自然。另外，選擇合適的transition-timing-function也很重要，例如ease-in-out、cubic-bezier()等。可以嘗試不同的值，找到最適合自己需求的動(dòng)畫(huà)效果。
另外，如果內(nèi)容區(qū)域包含圖片，需要確保圖片加載完成后再計(jì)算內(nèi)容區(qū)域的高度，否則可能會(huì)導(dǎo)致動(dòng)畫(huà)效果不流暢。可以使用JavaScript來(lái)監(jiān)聽(tīng)圖片的加載事件，并在加載完成后手動(dòng)設(shè)置max-height。
如何實(shí)現(xiàn)多個(gè)折疊面板同時(shí)展開(kāi)？
如果想實(shí)現(xiàn)多個(gè)面板同時(shí)展開(kāi)，使用radio就不可行了，因?yàn)閞adio天然具有互斥性。這時(shí)，應(yīng)該使用。相應(yīng)的CSS代碼也需要進(jìn)行調(diào)整，移除:checked偽類(lèi)選擇器對(duì)其他面板的影響。
<div class="accordion"> <input type="checkbox" id="panel1"> <label for="panel1">面板一標(biāo)題</label> <div class="content"> 面板一內(nèi)容：這里是面板一的詳細(xì)信息。 </div> <input type="checkbox" id="panel2"> <label for="panel2">面板二標(biāo)題</label> <div class="content"> 面板二內(nèi)容：這里是面板二的詳細(xì)信息。 </div> </div>
.accordion input:checked + label + .content { max-height: 500px; padding: 10px; }
無(wú)障礙性（Accessibility）方面，如何改進(jìn)CSS折疊面板？
無(wú)障礙性是Web開(kāi)發(fā)中一個(gè)非常重要的方面。對(duì)于折疊面板，需要確保屏幕閱讀器能夠正確識(shí)別面板的標(biāo)題和內(nèi)容，并能夠通過(guò)鍵盤(pán)進(jìn)行操作。
- 語(yǔ)義化HTML: 使用
- 鍵盤(pán)可訪問(wèn)性: 確保可以通過(guò)Tab鍵將焦點(diǎn)移動(dòng)到標(biāo)題上，并使用Enter鍵或Space鍵來(lái)展開(kāi)/收起面板。
- ARIA屬性: 使用aria-controls屬性將標(biāo)題與內(nèi)容區(qū)域關(guān)聯(lián)起來(lái)，使用aria-labelledby屬性將內(nèi)容區(qū)域與標(biāo)題關(guān)聯(lián)起來(lái)。
<div class="accordion"> <button aria-expanded="false" aria-controls="panel1-content" id="panel1-heading">面板一標(biāo)題</button> <div id="panel1-content" aria-labelledby="panel1-heading" hidden> 面板一內(nèi)容：這里是面板一的詳細(xì)信息。 </div> <button aria-expanded="false" aria-controls="panel2-content" id="panel2-heading">面板二標(biāo)題</button> <div id="panel2-content" aria-labelledby="panel2-heading" hidden> 面板二內(nèi)容：這里是面板二的詳細(xì)信息。 </div> </div>
const buttons = document.querySelectorAll('.accordion button'); buttons.forEach(button => { button.addEventListener('click', () => { const expanded = button.getAttribute('aria-expanded') === 'true'; button.setAttribute('aria-expanded', !expanded); const content = document.getElementById(button.getAttribute('aria-controls')); content.hidden = expanded; }); });
注意，這里需要使用JavaScript來(lái)控制aria-expanded屬性和hidden屬性，因?yàn)镃SS無(wú)法直接修改這些屬性。
.png)
