:target不适合常规手风琴，因其依赖url锚点、仅支持单目标、无法收起当前项、不支持多开和默认关闭；:checked配合隐藏表单控件更可靠，但需注意max-height过渡限制、dom层级、label绑定及无障碍缺陷。
用 :target 或 :checked 实现手风琴菜单，核心在于「无需 JS 就能控制显隐」，但两者适用场景和限制差异很大——:target 依赖 URL 锚点跳转，适合单页内导航型折叠；:checked 基于隐藏复选框/单选框状态，更适合纯交互型、可多开或单开的手风琴。
为什么 :target 不适合做常规手风琴
:target 只在元素 ID 与 URL 锚点（如 #section2）匹配时生效，且整个页面只能有一个 :target。这意味着：
- 点击一个标题会改变 URL，影响浏览器历史和分享链接，对 SEO 和 UX 是双刃剑
- 无法“收起当前项”——除非再点一次锚点（但 URL 不变，
:target不会重新触发） - 不能实现“多面板同时展开”，也不支持“默认关闭所有”的初始态（除非 URL 初始无锚点）
- 移动端返回按钮行为可能意外展开上一个面板
它更适合作为文档侧边栏目录的锚点联动，而非交互式手风琴。
:checked + 隐藏输入框是更靠谱的选择
用 <input type="checkbox"> 或 <input type="radio"> 作为状态开关，配合兄弟选择器 ~ 控制后续内容显隐。关键点：
- 把
<input>放在标题前（或标题内），确保 CSS 能用input:checked ~ .content选中对应区域 - 用
display: none隐藏输入框本身，但不能用visibility: hidden或opacity: 0——部分浏览器对不可见表单控件的 :checked 状态支持不稳定 - 单选手风琴用
type="radio"并统一name；多开用type="checkbox" - 过渡动画必须加在被展开的容器（如
.content）上，且推荐用max-height+overflow: hidden，而非height（因为高度未知）
示例结构片段：
<input id="item1" type="checkbox" hidden><label for="item1">标题一</label> <div class="content">内容区...</div>
CSS 片段：
.content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
input:checked ~ .content { max-height: 500px; }
容易被忽略的细节和兼容性坑
这些点不处理，手风琴会在某些设备或状态下失效：
-
max-height的目标值不能设为none——CSS 过渡不支持从数值到none，必须预估一个足够大的固定值（如500px），或用 JS 动态写入（那就不是纯 CSS 方案了） - Safari 对
:checked+~在某些嵌套结构下有渲染延迟，建议把input和.content放在同一层级，避免跨多层 DOM - 如果标题用
<button></button>或<a></a>，它们无法触发:checked，必须用<label></label>关联for属性，或把input包进标签内 - 无障碍方面：要加
aria-expanded和aria-controls，纯 CSS 无法自动更新这些属性，需 JS 补充（这是纯 CSS 方案的硬伤）
真要零 JS 实现，:checked 是目前最稳的路径；但凡需要默认关闭、无障碍支持、或内容高度完全动态，就得接受它那几个绕不开的妥协点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
