如何用css制作FAQ手风琴效果-css教程-PHP中文网

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

P粉602998670

发布： 2025-09-21 10:21:01

原创

788人浏览过

实现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">
  <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实现平滑展开动画。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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

登录后复制