如何用css制作FAQ手风琴效果

实现FAQ手风琴效果的关键是利用CSS的:checked伪类配合隐藏复选框，通过label触发checkbox状态改变，结合max-height和transition控制内容展开与收起；每个faq-item包含一个隐藏的checkbox、label和答案区域，点击label时:checked生效，使~相邻的.faq-answer的max-height从0变为150px，实现平滑展开，并通过::after切换+/-符号指示状态，结构语义化且无需JavaScript，适合静态页面，若需单次仅展开一项，则建议添加JS控制。

实现FAQ手风棋效果的关键是利用CSS的

:checked

伪类配合隐藏的复选框，结合过渡动画控制内容展开与收起。不需要JavaScript也能完成，结构清晰且易于维护。

HTML结构：使用label和checkbox控制展开

每个问题用一个包含输入框（checkbox）、label和内容区的容器包裹。点击label会触发checkbox状态变化，从而控制内容显示。

<div class="faq-item">
<input type="checkbox" id="faq1" class="faq-toggle">
<label for="faq1" class="faq-question">什么是手风琴效果？</label>
<div class="faq-answer">
<p>一种点击标题后展开对应内容，再次点击则收起的效果，像手风琴一样伸缩。</p>
</div>
</div>

CSS样式：控制默认隐藏与过渡动画

通过max-height和overflow控制内容区域的可见性，利用transition实现平滑展开动画。

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

174

查看详情

.faq-item {
border-bottom: 1px solid #ddd;
}
<p>.faq-toggle {
display: none;
}</p><p>.faq-question {
display: block;
padding: 15px;
background: #f7f7f7;
cursor: pointer;
font-weight: bold;
}</p><p>.faq-question::after {
content: '+';
float: right;
}</p><p>.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 15px;
}</p><p>.faq-toggle:checked ~ .faq-answer {
max-height: 150px; /<em> 根据实际内容调整 </em>/
}</p><p>.faq-toggle:checked ~ .faq-question::after {
content: '−';
}</p>

优化细节：适配多条目与可访问性

多个FAQ项可以共用同一组样式，无需额外JS。同时确保语义化标签提升可访问性。

立即学习“前端免费学习笔记（深入）”；

• 给每个input设置唯一id和for属性关联label
• 设置合适的max-height避免内容被截断
• 可用:focus-within增强键盘导航体验
• 添加aria-expanded属性更佳（需JS辅助）

基本上就这些。纯CSS方案简洁可靠，适合静态FAQ页面。如果需要同时只展开一项，建议加入少量JavaScript控制状态。