常见原因是transform-origin未对齐箭头中心或旋转类切换后未重绘；应使用svg替代字符箭头，设置viewbox和transform-origin:center，配合transition和rotate(180deg)实现精准旋转。
点击折叠菜单时箭头不旋转或旋转错位
常见原因是 CSS 变换原点（transform-origin）没对齐箭头中心，或旋转类名切换后未触发重绘。箭头图标通常用 ▼ 或 ▼，但纯字符旋转易偏移；更稳妥的做法是用 <svg></svg> 或 <i></i> 包裹后统一控制。
- 确保箭头容器设为
display: inline-flex或display: inline-block，避免行内元素默认基线对齐导致跳动 - 旋转使用
transform: rotate(180deg)，而非rotate(-180deg)—— 两者视觉一致，但部分浏览器对负角度插值渲染有细微差异 - 添加
transition: transform 0.2s ease到箭头元素本身，不要只加在父级菜单上 - 若用伪元素
::after生成箭头，需确认content值被正确解析（如content: "▼"要注意引号和编码）
用 JavaScript 控制 class 切换但点击无反应
问题常出在事件绑定时机或选择器范围。比如菜单 DOM 是动态插入的，但脚本在 DOMContentLoaded 时就执行了 document.querySelectorAll(".menu-toggle")，结果找不到节点。
- 优先用事件委托：监听父容器（如
document.body）的click，再用event.target.matches(".menu-toggle")判断 - 切换类名时，别只加
rotated，要明确移除旧状态：用el.classList.toggle("rotated")，而不是add()+remove()分开写 - 检查是否误把
click绑在了<span></span>上，而实际点击区域是外层<button></button>—— 此时event.target不是你预期的元素 - 如果菜单支持键盘操作（Enter/Space），记得同步处理
keydown事件，否则可访问性失效
SVG 箭头比字符箭头更可控
字符箭头受字体、字号、行高影响大，同一段 CSS 在不同系统上渲染位置可能偏移几像素；SVG 路径能精准锚定中心点，且支持 transform-box: fill-box 配合 transform-origin。
<svg width="16" height="16" viewbox="0 0 16 16" class="arrow"><path d="M4 6l4 4 4-4" stroke="#333" stroke-width="1.5" fill="none"></path></svg>
- 给 SVG 加
class="arrow"，CSS 中写.arrow { transition: transform 0.2s ease; }和.arrow.rotated { transform: rotate(180deg); } - 务必设置
viewBox，否则transform-origin: center会按实际宽高算，而非视觉中心 - 避免用
width/height属性缩放 SVG，改用transform: scale(1.2)配合transform-box，防止路径描边失真
移动端点击穿透或响应延迟
iOS Safari 和部分安卓 WebView 对 click 事件有 300ms 延迟，且如果菜单区域用了 pointer-events: none 或 opacity: 0 过渡，可能导致点击未命中。
- 给触发按钮加
cursor: pointer和-webkit-tap-highlight-color: transparent，减少误判 - 不要依赖
opacity控制显示隐藏 —— 改用visibility: hidden+height: 0+overflow: hidden组合，确保点击区域始终存在 - 如果用了
touchstart替代click，记得在touchend后立刻preventDefault()，否则可能触发双击缩放 - 检查是否有
z-index层级错乱：折叠菜单内容层被其他绝对定位元素盖住，看似点了没反应
viewBox 和 CSS 的 transform-origin 配合关系 —— 少一个，旋转就偏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
