实现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状态变化，从而控制内容显示。
一种点击标题后展开对应内容，再次点击则收起的效果，像手风琴一样伸缩。
CSS样式：控制默认隐藏与过渡动画
通过max-height和overflow控制内容区域的可见性，利用transition实现平滑展开动画。
.faq-item { border-bottom: 1px solid #ddd;}.faq-toggle {display: none;}
.faq-question {display: block;padding: 15px;background: #f7f7f7;cursor: pointer;font-weight: bold;}
.faq-question::after {content: '+';float: right;}
.faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;padding: 0 15px;}
.faq-toggle:checked ~ .faq-answer {max-height: 150px; / 根据实际内容调整 /}
.faq-toggle:checked ~ .faq-question::after {content: '−';}
优化细节：适配多条目与可访问性
多个FAQ项可以共用同一组样式，无需额外JS。同时确保语义化标签提升可访问性。
稿定抠图
AI自动消除图片背景
76 查看详情
立即学习“前端免费学习笔记（深入）”；
给每个input设置唯一id和for属性关联label设置合适的max-height避免内容被截断可用:focus-within增强键盘导航体验添加aria-expanded属性更佳（需JS辅助）
基本上就这些。纯CSS方案简洁可靠，适合静态FAQ页面。如果需要同时只展开一项，建议加入少量JavaScript控制状态。
以上就是如何用css制作FAQ手风琴效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1064723.html
微信扫一扫 
支付宝扫一扫 
