侧边导航折叠需javascript控制类名切换配合css过渡动画实现，推荐用transform: translatex()替代width缩放，并兼顾移动端事件、可访问性及焦点管理。
侧边导航折叠不是靠纯 HTML 实现的，HTML 本身没有交互能力；必须配合 JavaScript 控制显隐，再用 CSS 做过渡和布局。直接写个 <nav></nav> 标签加个 class="collapsed" 不会自动折叠——那是静态标记，没行为。
用 classList.toggle() 切换折叠状态最稳妥
别用 style.display = 'none' 硬切，会丢失 CSS 过渡效果，也难维护。用类名控制更符合现代写法：
-
JavaScript只负责增删类名，比如sidebar-collapsed -
CSS定义这个类名下的宽度、溢出、子项 visibility 等样式 - 点击按钮时调用
document.getElementById('sidebar').classList.toggle('sidebar-collapsed') - 如果需要记忆上次状态（比如刷新后保持折叠），可读写
localStorage存'collapsed'或'expanded'
transform: translateX() 比 width: 0 更适合动画折叠
单纯缩 width 容易导致子元素文字被挤压、图标错位，尤其含 flex 或 grid 布局时。用位移更安全：
- 默认侧边栏
width: 240px，设transition: transform 0.3s ease - 折叠时加类：
transform: translateX(-100%)（完全移出视口） - 主内容区用
margin-left或grid-template-columns配合响应式调整宽度 - 避免对
display或visibility做动画——它们不支持过渡
移动端适配要单独处理 click 和 touchstart
在 iOS Safari 或某些安卓浏览器里，只绑 click 会有约 300ms 延迟，折叠操作卡顿明显：
- 同时监听
click和touchstart，并用event.preventDefault()防止重复触发 - 折叠按钮建议用
<button type="button"></button>，避免表单提交干扰 - 真机测试时注意：iOS 上
position: fixed侧边栏可能在滚动时闪动，可改用position: absolute+ 手动监听scroll - 别依赖
:hover实现桌面端悬停展开——触屏设备没 hover，且不符合可访问性要求
真正麻烦的不是折叠逻辑，而是折叠后子菜单的显示控制、焦点管理、键盘导航（比如按 Tab 键能否进入折叠后的菜单）、以及屏幕阅读器如何播报当前状态。这些细节一旦漏掉，用户一用就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
