用 classList.toggle 切换 sidebar-open 类控制侧边栏展开/收起，CSS 通过 width 过渡实现动画，JS 绑定按钮点击事件即可，简洁可靠。
用 classList.toggle 控制侧边栏展开/收起，核心是切换一个 CSS 类（比如 sidebar-open），再通过 CSS 控制宽度、可见性或过渡动画。
HTML 结构要简洁明确
确保侧边栏和触发按钮有清晰的标识，方便 JS 选中：
<button id="menu-toggle">☰</button><br><aside id="sidebar" class="sidebar"><br> <nav><a href="#">首页</a></nav><br></aside>
按钮负责触发，aside 是侧边栏容器，初始带基础样式类（如 sidebar）。
CSS 定义展开与收起的状态
用一个类（如 sidebar-open）表示“展开”，CSS 中定义两种状态的视觉表现：
.sidebar {<br> width: 0;<br> overflow: hidden;<br> transition: width 0.3s ease;<br>}<br><br>.sidebar-open {<br> width: 240px;<br>}
- 初始状态：
width: 0+overflow: hidden让内容不可见 - 展开状态：
.sidebar-open覆盖宽度，配合transition实现平滑动画 - 也可用
max-width、transform: translateX()或visibility+opacity组合，按需选择
JavaScript 绑定点击并切换类
获取元素，监听按钮点击，对侧边栏调用 toggle：
const toggleBtn = document.getElementById('menu-toggle');<br>const sidebar = document.getElementById('sidebar');<br><br>toggleBtn.addEventListener('click', () => {<br> sidebar.classList.toggle('sidebar-open');<br>});
-
toggle自动判断：有该类就移除，没有就添加——正好满足“点一下展开、再点收起” - 无需手动判断状态或写 if/else，代码更简洁可靠
- 若需兼容旧浏览器（IE），可改用
contains+add/remove，但现代项目基本不用考虑
进阶小技巧（可选）
- 点击遮罩层（overlay）也收起：给 overlay 添加相同事件，同样调用
sidebar.classList.remove('sidebar-open') - 键盘支持：为按钮添加
tabindex="0"，监听Enter或Space键 - 防止快速连点导致状态错乱：
toggle本身是原子操作，不会出错，放心使用
