最稳纯css实现“一键折叠/展开全部”需用checkbox记忆状态，input必须置于dom最前、紧邻label，所有侧边项用:checked ~ .sidebar-item控制，折叠时设display:none并同步aria-hidden与tabindex，移动端强制收起子级且一级热区不小于44×44px。
用 checkbox 控制所有侧边选项的显隐最稳
纯 CSS 实现“一键折叠/展开全部”时，checkbox 是唯一能自然记忆状态、不依赖 JS 且兼容触摸设备的方案。别用 display: none 切换或 JS 操控 class —— 那会丢失状态、破坏可访问性，且移动端点按延迟明显。
- 必须把
input[type="checkbox"]放在 DOM 最前，紧挨着它的label，后面紧跟所有要控制的侧边功能容器（如多个.sidebar-item） - 所有目标元素用兄弟选择器
input:checked ~ .sidebar-item控制显隐，不能隔标签、不能换行（HTML 空白符会被解析为文本节点，打断兄弟关系） - 折叠时设
display: none，不是visibility: hidden或opacity: 0—— 后两者仍占布局空间，Tab 键还能聚焦到隐藏项上
toggle 按钮怎么写才不翻车
按钮本质是 label，不是 button 元素。直接写 <label for="global-toggle">☰</label>，对应 <input type="checkbox" id="global-toggle">。
- 不要用
onclick或addEventListener绑 JS —— 这会让折叠状态无法持久（刷新即重置），也绕过屏幕阅读器对 checkbox 的原生播报 -
label的for属性值必须和input的id完全一致，大小写、连字符都不能错 - 如果需要文字提示（如“收起全部”/“展开全部”），用伪元素
::after动态切换内容，而不是 JS 改innerText
折叠后子菜单和焦点怎么不丢
真正卡住用户的不是折叠动作本身，而是折叠后 Tab 键跳不到该去的地方，或者屏幕阅读器念不出当前状态。
- 所有被
display: none的侧边项，必须同时移除tabindex或设为tabindex="-1"，否则键盘用户仍会聚焦到不可见区域 - 在
input:checked ~ .sidebar-item规则里，加一句pointer-events: none防止触摸穿透 - 若某侧边项内含表单控件（如搜索框、开关），折叠时需同步
aria-hidden="true"，展开时还原为aria-hidden="false"
移动端必须强制收起子级，不能妥协
小屏下如果允许多级菜单同时展开，主内容区会被严重挤压，甚至触发横向滚动——这不是体验问题，是可用性失效。
- 在
@media (max-width: 768px)中，给所有子级菜单（比如.submenu）加display: none !important - 同时隐藏所有二级及以下的
label（只留一级 toggle 可见），避免误触 - 一级菜单项的点击热区必须 ≥ 44×44px，别信“视觉上够大就行”，真机手指点不准
复杂点不在怎么写动画，而在折叠后是否还符合 WCAG 2.1 的键盘导航与语义要求。漏掉 aria-hidden 或 tabindex 处理，用户一用就卡在看不见的空白里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
