应使用而非包裹菜单侧边栏，因其明确语义且支持无障碍访问；需设置min-height:44px和display:block确保触控区域；用transform替代display:none实现平滑展开；JS中须调用e.stopPropagation()防止事件冒泡；禁用:hover依赖以保障多端兼容。
用 <nav></nav> 而不是 <div> 包裹菜单
<p>侧边栏本质是导航区域，<code><nav></nav> 告诉浏览器和读屏器“这里有跳转链接”，<div> 则被忽略。不换标签，后续所有样式和 JS 都可能白做。
<p>常见错误：</p>
<ul>
<li>写成 <code><div class="sidebar"><a href="/home">首页</a></div> → 键盘 Tab 会跳过整个区块
aria-label → 屏幕阅读器只读“导航”，不知道是“主菜单”还是“用户设置”正确写法：<nav aria-label="主菜单"><ul><li><a href="/dashboard">仪表盘</a></li></ul></nav>
给每个可点击项设足额触摸区域：min-height: 44px + display: block
移动端点不中，90% 是因为 <a></a> 默认是 inline 元素，真实点击高度远低于视觉所见。不能只靠 padding，必须从布局层锁定响应区。
立即学习“前端免费学习笔记（深入）”；
关键配置：
a, button { display: block; min-height: 44px; padding: 12px 16px; }- 禁用
line-height ，否则文字被截或点击区压缩 - 父容器若设了
font-size: 0（常见于图标对齐），子元素必须重置font-size，否则em-单位的padding归零
控制展开/收起别用 display: none，改用 transform: translateX()
display: none 会让元素彻底退出渲染流，无法参与 CSS 过渡动画，且键盘焦点直接丢失。滑动菜单必须保持 DOM 存在、仅改变位置。
推荐方案：
- 默认隐藏：
.sidebar { transform: translateX(-100%); } - 展开状态：
.sidebar.is-open { transform: translateX(0); } - 动画必须写全：
transition: transform 0.3s ease-in-out;（漏掉ease-in-out会生硬） - 避免用
left或margin-left→ 触发重排，低端安卓机明显卡顿
JS 绑定事件时，必须处理 event.stopPropagation()
点击菜单项却触发了全局“点击外部关闭”，这是冒泡没截断的典型表现。尤其当侧边栏带遮罩层（<div class="overlay">）时，问题必现。
<p>修复要点：</p>
<ul>
<li>所有可点击菜单项（<code><a></a>、<button></button>）的 click 回调开头加 e.stopPropagation();
<label></label> 控制抽屉开关，也要在 onclick 或 JS 监听里加该语句CSS :hover 实现交互 —— 它在移动端完全无效，且无键盘支持真正麻烦的不是写出滑动效果，而是让 transform 在 iOS Safari 和旧版 Android WebView 中行为一致：某些 WebKit 版本需加 -webkit-transform，而 touch-action: manipulation 才能消除 300ms 点击延迟。这些细节一漏，菜单就在特定设备上失灵。
