当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现FAQ手风琴效果教程

CSS实现FAQ手风琴效果教程

2025-10-03 20:31:46 0浏览收藏

想要轻松实现FAQ手风琴效果？本教程将带你深入了解如何仅用CSS打造一个美观、实用的手风琴式问答列表。无需JavaScript，通过巧妙地运用`:checked`伪类和隐藏的复选框，配合`max-height`和`transition`属性，即可实现内容的平滑展开与收起。本文将详细介绍HTML结构和CSS样式，包括如何使用label触发checkbox状态，以及如何通过CSS控制默认隐藏与过渡动画。更有优化细节，如适配多条目和提升可访问性，让你的FAQ页面更上一层楼。无论是静态页面还是需要提升用户体验的网站，这都是一个值得学习的纯CSS解决方案。

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

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

实现FAQ手风棋效果的关键是利用CSS的:checked伪类配合隐藏的复选框，结合过渡动画控制内容展开与收起。不需要JavaScript也能完成，结构清晰且易于维护。

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

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

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

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

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

.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>