侧边栏收缩按钮点不动的根本原因是dom结构或css状态未对齐：按钮与侧边栏须同级嵌套于同一父容器，侧边栏初始width必须为具体数值（如"240px"），transition需显式声明width而非all，禁用display:none改用width+overflow:hidden控制显隐，js设置style.width必须带单位。

侧边栏收缩按钮为什么点不动？ 常见现象是点击按钮后宽度没变、动画卡住、或者收缩后内容区没跟着移动。根本原因往往不是 JS 写错了，而是 DOM 结构或 CSS 状态没对齐。

• 按钮和侧边栏必须在同一父容器内，且不能嵌套在侧边栏内部（否则收缩后按钮消失）
• 侧边栏初始 width 必须是具体数值（如 "240px"），不能是 auto 或 100%，否则 transition 无法插值
• transition: width 0.3s ease 必须显式声明，写 transition: all 在部分浏览器里不生效
• 如果用了 display: none 控制显隐，过渡动画会直接跳变——改用 width + overflow: hidden

JS 里怎么安全改 width？ 直接操作 style.width 最快，但单位错一个字符就失效。别靠 offsetWidth 反推数值来设，容易因四舍五入出偏差。

• 常量提前定义：const WIDTH_EXPANDED = "240px"; const WIDTH_COLLAPSED = "60px";
• 切换逻辑用字符串比布尔判断更稳：sidebar.style.width === WIDTH_COLLAPSED
• 不要用 el.style.width = 240 或 "240"，必须带单位："240px"
• 如果侧边栏里有浮动子元素，收缩后可能溢出，加 overflow: hidden 并确保子项用 flex 或 grid 布局

移动端点不中、手势冲突怎么办？ PC 上好使的按钮，放到手机上常出现点不中、滑动误触发、或者抽屉关不掉。这不是 JS 问题，是 touch 行为没隔离。

• 小屏下优先用 transform: translateX(-100%) 替代 width 改变，性能更好也更稳定
• 侧边栏容器加 touch-action: pan-y，允许上下滚动但禁用左右拖拽干扰
• 遮罩层（.overlay）必须和侧边栏同级，z-index 高于主内容但低于侧边栏
• 媒体查询里直接 display: none 隐藏按钮，别用 JS resize 监听反复绑定事件

aria-expanded 怎么同步才不翻车？ 纯视觉按钮对屏幕阅读器不可见，状态不同步会导致辅助技术读出“已展开”但实际收着，或者键盘用户 Tab 到隐藏区域。

• 按钮必须带 aria-expanded="false"（初始状态要和 CSS 一致）
• aria-controls 的值必须等于侧边栏的 id，大小写都不能错
• JS 中切换时，setAttribute("aria-expanded", "true") 和 classList.toggle() 必须同时执行
• 别用 getAttribute("aria-expanded") === "true" 做判断依据，应以侧边栏的 class 或 style 宽度为准

复杂点在于状态记忆和响应式交叠：比如 PC 端展开、切到手机自动收起，再切回 PC 时该保持收起还是恢复展开？这得靠 localStorage 存状态，而不是仅靠 class 切换。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！