侧边栏折叠按钮需与dom结构、css状态、js事件形成闭环，推荐写法：☰，并同步切换class与aria-expanded属性，纯css控制文字隐藏，确保无障碍、动画和响应式正确。
侧边栏折叠按钮本身不是“写出来就行”，而是要和 DOM 结构、CSS 状态、JS 事件绑定形成闭环；单独写一个 <button></button> 没用，关键在它触发的 class 切换是否被 CSS 正确响应、是否同步影响主内容区布局。
按钮 HTML 结构必须带明确 role 和 data 属性
纯视觉按钮容易被屏幕阅读器忽略，也难做状态同步。推荐写法：
<button type="button" class="sidebar-toggle" aria-expanded="false" aria-controls="sidebar" data-sidebar-toggle>☰</button>
注意三点：
• aria-expanded 初始值要和实际 CSS 状态一致（比如默认展开就设 false）
• aria-controls 必须指向侧边栏容器的 id，否则无障碍支持失效
• data-sidebar-toggle 是 JS 选取器，比用 class 更可靠（避免误触其他同名按钮）
JS 绑定 click 时必须 toggle class 并同步更新 aria-expanded
只改 class 不改 aria-expanded，会导致辅助技术读出错误状态；只改 aria-expanded 不改 class，CSS 动画不生效。正确做法是两者同步：
document.querySelector('[data-sidebar-toggle]').addEventListener('click', () => {
const sidebar = document.getElementById('sidebar');
const btn = document.querySelector('[data-sidebar-toggle]');
sidebar.classList.toggle('collapsed');
btn.setAttribute('aria-expanded', sidebar.classList.contains('collapsed'));
});
常见错误：
• 用 btn.getAttribute('aria-expanded') === 'true' 做条件判断 → 实际应读取 sidebar.classList.contains('collapsed')，因为 DOM 状态可能滞后
• 在事件里直接操作 style.width → 会覆盖 CSS transition，动画卡顿
• 忘记加 type="button" → 表单内点击可能意外提交
折叠后菜单文字隐藏要靠 CSS，不是 JS 移除节点
很多人用 JS 清空 .menu 内容或设 display: none，这会导致：文本重排、过渡中断、SEO 内容丢失。正确方式是纯 CSS 控制可见性：
.sidebar.collapsed .menu-item span { display: none; }
.sidebar.collapsed .menu-item { padding: 12px 8px; }
.sidebar.collapsed .menu-item::before { margin-bottom: 0; }
要点：
• 用 span 包裹文字，图标用伪元素或 <i></i>，确保折叠时只隐文字不碰结构
• 所有尺寸单位用 px 或 rem，避免百分比在宽度突变时计算失准
• 不要用 visibility: hidden，它仍占空间；也不用 opacity: 0，它无法真正“隐藏”语义
最易被忽略的是：折叠按钮的点击区域必须足够大（至少 44×44px），且在移动端需处理 touchstart 防止延迟；另外，如果侧边栏用了 position: fixed，折叠后 width 变化可能引发滚动条闪动——这时候得在 .sidebar 上加 overflow: hidden 锁住渲染边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
