利用checkbox的选中状态控制内容显示，通过label触发checked变化，再用~选择器控制max-height实现展开收起动画。结构包含隐藏checkbox、可点击label及内容区，CSS中:checked配合max-height与transition完成流畅动画，支持多面板、键盘操作及默认展开，轻量且兼容性好，适用于静态页面或高性能需求场景。
使用 CSS 实现折叠面板效果，可以通过 checkbox、label 和 兄弟元素选择器（~） 来完成，无需 JavaScript。这种方式轻量、语义清晰，适合静态页面或对性能要求较高的场景。
基本原理说明
利用 checkbox 的选中状态控制内容区域的显示与隐藏。通过 label 标签绑定到 checkbox，点击 label 时会触发 checkbox 的 checked 状态变化。再使用 CSS 中的兄弟选择器 ~ 选取后续的内容块，配合 max-height 控制展开和收起动画。
HTML 结构
结构需要包含一个隐藏的 checkbox、一个可点击的 label，以及要展开/收起的内容区域。
这里是折叠面板中的内容，可以是任意 HTML 元素。
CSS 样式实现
关键在于利用 :checked 状态和兄弟选择器 ~ 控制内容区的 max-height。
.accordion {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
margin-botto
m: 10px;
}
.accordion-toggle {
display: none; / 隐藏 checkbox /
}
.accordion-title {
padding: 12px;
background-color: #f5f5f5;
cursor: pointer;
font-weight: bold;
user-select: none;
}
.accordion-title:hover {
background-color: #eee;
}
.accordion-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease-out;
padding: 0 12px;
}
/ 当 checkbox 被选中时，展开内容 /
.accordion-toggle:checked ~ .accordion-content {
max-height: 200px; / 根据实际内容调整，或设为足够大 /
padding: 12px;
}
m: 10px;
}
注意事项与优化建议
这种方案虽然简洁，但有一些细节需要注意：
- max-height 设为固定值是为了实现动画，若内容高度不确定，可设为一个足够大的值（如 500px 或 1000px），但不能用 auto
- transition 使用 ease-out 让收起更自然
- 多个面板可重复使用相同结构，每个 checkbox 的 id 需唯一
- 支持键盘操作（Tab + Space 触发 checkbox）提升可访问性
- 若需默认展开，给 checkbox 添加 checked 属性即可
基本上就这些。用 checkbox + label + ~ 实现折叠面板，简单有效，兼容性好，适合大多数基础场景。
