利用CSS的transition属性与:target或:checked伪类结合，通过max-height变化实现FAQ手风敲琴动画效果，无需JavaScript即可完成交互，适合初学者掌握CSS动态控制技巧。
在CSS初级项目中实现FAQ手风琴效果，关键在于利用transition属性控制展开收起的动画，结合:target伪类或:checked搭配复选框来切换状态。不需要JavaScript也能完成基础交互，适合初学者理解CSS的动态表现能力。
使用 :target 伪类实现点击展开
当页面中的锚点被点击时，:target会匹配对应ID的元素。我们可以利用这一点控制FAQ项的显示与隐藏。
基本结构如下：
<div class="faq-item">
<a href="#answer1">什么是手风琴效果？</a>
<div id="answer1" class="answer">
手风琴效果是指点击标题时内容展开，再次点击则收起...
</div>
</div>
CSS部分设置初始隐藏和过渡动画：
立即学习“前端免费学习笔记（深入）”；
- 默认状态下，.answer 设置为 max-height: 0、overflow: hidden
- 使用 transition: max-height 0.3s ease 添加滑动动画
- 当该元素成为目标时（即URL包含#answer1），应用 :target 规则，设置 max-height 为一个足够大的值（如 500px）
示例代码：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
.answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.answer:target {
max-height: 500px;
}
使用复选框 + :checked 实现更灵活控制
如果希望支持多次开关且不影响URL，可以用隐藏的复选框配合
HTML结构示例：
<div class="faq-item">
<input type="checkbox" id="faq1" class="faq-toggle" hidden>
<label for="faq1" class="faq-question">如何添加动画？</label>
<div class="faq-answer">
使用 transition 属性即可...
</div>
</div>
CSS控制逻辑：
- 默认 .faq-answer 也是 max-height: 0 和 overflow: hidden
- 给 .faq-answer 添加 transition 动画
- 通过 .faq-toggle:checked ~ .faq-answer 选择器，在勾选时改变 max-height 实现展开
样式示例：
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-toggle:checked ~ .faq-answer {
max-height: 200px;
}
优化视觉体验的小技巧
为了让手风琴看起来更自然，可以加入一些细节调整：
- 给标题添加小图标（如+/-），用 ::after 伪元素配合 content 切换
- 设置合适的 easing 曲线，比如 cubic-bezier(0.4, 0, 0.2, 1) 让动画更顺滑
- 为整个 FAQ 容器添加上下 padding，提升可读性
- 使用 border-bottom 分隔每个问题项，增强结构感
transition 与伪类的结合使用，就能在不写JS的情况下做出简洁实用的FAQ手风琴效果，是CSS入门阶段非常值得练习的小项目。 
