使用复选框和CSS实现手风琴效果：通过隐藏复选框控制内容区域的显示与隐藏，利用:checked伪类触发max-height变化实现展开收起动画，支持多面板独立操作。
实现一个简单的折叠手风琴效果，可以通过 HTML 和 CSS 结合使用复选框（checkbox）或利用 :target 伪类来控制内容的展开与收起。下面是一个基于复选框和 CSS 的纯前端实现方法，无需 JavaScript。
1. HTML 结构设计
使用 input[type="checkbox"] 隐藏复选框，通过点击标签（label）切换状态，控制内容区域的显示与隐藏。
示例代码：
<div class="accordion"><input type="checkbox" id="section1" class="accordion-toggle">
<label for="section1" class="accordion-title">第一部分</label>
<div class="accordion-content">
<p>这里是第一部分内容。</p>
</div>
</div>
2. 基础 CSS 样式
隐藏复选框，美化标题和内容区域，并设置内容默认隐藏。
立即学习“前端免费学习笔记（深入）”；
.accordion {border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 4px;
overflow: hidden;
}
.accordion-toggle {
display: none;
}
.accordion-title {
background-color: #f0f0f0;
padding: 15px;
font-weight: bold;
cursor: pointer;
display: block;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #fff;
padding: 0 15px;
}
.accordion-toggle:checked + .accordion-title + .accordion-content {
max-height: 200px; /* 根据内容调整高度 */
padding: 15px;
}
3. 可选优化：添加箭头图标旋转
可以给标题前加一个小图标，点击时旋转，增强交互感。
例如在 label 中加入一个箭头符号：
然后添加旋转样式：
.accordion-toggle:checked + .accordion-title {transform: rotate(90deg);
color: #007bff;
}
注意：若要更精确控制图标，建议使用伪元素或背景图。
4. 多个面板独立展开
重复上面结构即可创建多个可独立开关的面板。每个 input 使用不同的 ID，互不影响。
这种结构支持多个内容同时展开，适合常见 FAQ 或设置菜单场景。
基本上就这些。用复选框配合 CSS 的属性选择器和过渡动画，就能做出简洁的手风琴效果，不依赖 JavaScript，兼容性好，加载快。
