必须用<input type="checkbox">，因其:checked伪类支持独立开闭，而radio会导致互斥、违背折叠面板多开需求；CSS中需用~选择后续兄弟元素并配合max-height过渡实现动画，但纯CSS方案无法动态更新aria-expanded，影响无障碍支持。
能实现，但必须用 <input type="checkbox"> 做控制开关，不能直接作用在 <details> 或普通容器上。
为什么必须用 checkbox 而不是 radio 或其他表单控件
:checked 伪类只对 <input type="checkbox"> 和 <input type="radio"> 生效，但折叠面板需要独立开闭（非互斥），所以 checkbox 是唯一合理选择。radio 会导致多个面板只能同时打开一个，违背常见交互预期。
- 浏览器对
:checked的支持是稳定的，所有现代浏览器都支持 - 不能对
<div>或<section>自定义:checked—— CSS 规范不允许可交互伪类脱离表单控件 - 若用
<input type="radio">，需确保name属性相同才能互斥；但折叠面板通常不需要这种约束
兄弟选择器怎么选：~ 还是 +？
必须用通用兄弟选择器 ~，不能只依赖相邻兄弟选择器 +。因为实际 HTML 结构中，触发元素（<input>）和内容区域（<div class="panel-content">）之间往往隔着一个 <label> 或标题元素。
-
input:checked + .panel-content只匹配紧挨在后的第一个同类兄弟，中间插了<label>就失效 -
input:checked ~ .panel-content匹配后续所有符合条件的兄弟元素，更健壮 - 注意：
~要求目标元素和input在同一父级下，不能跨层嵌套
关键 CSS 写法与隐藏/显示逻辑
核心是利用 :checked 控制后续兄弟元素的 max-height 和 overflow，而非简单切 display —— 否则无法加过渡动画。
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"] {
display: none;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
input:checked ~ .panel-content {
max-height: 500px; /* 需设足够大的值，不能用 auto */
padding: 1rem;
}-
max-height设为具体数值（如500px）才能触发过渡；max-height: auto不会动画 - 如果内容高度差异大，可按需设不同值，或用 JS 动态写入（此时已非纯 CSS 方案）
-
padding和opacity可额外加入过渡，增强视觉反馈 - 记得给
<label>加cursor: pointer，提升可点击感知
容易被忽略的可访问性与语义问题
纯 CSS 方案无法自动更新 aria-expanded 或 aria-hidden，屏幕阅读器可能无法正确识别展开状态。
- 手动在
<label>上加aria-controls="content-id"，并在<div class="panel-content">上设对应id - 但
aria-expanded的 true/false 切换仍需 JS，否则辅助技术读不出当前状态 - 如果项目对无障碍有硬性要求（如政府、教育类网站），建议用
<details><summary>原生方案，或至少用 JS 补全 ARIA 属性
真正“纯 CSS”的代价是放弃一部分语义表达能力，这点在交付前得和产品、测试对齐清楚。
