最简实现是用HTML+CSS+JS通过toggleClass控制侧边栏显隐，核心为transform过渡动画、正确事件绑定及遮罩层拦截触摸事件。
点击按钮触发侧边栏显示/隐藏的最简实现
用纯 HTML + CSS + 少量 JavaScript 就能实现，不需要框架或第三方库。核心是控制一个 class 的切换，配合 CSS 过渡动画，就能让侧边栏“滑出来”或“收回去”。
关键不是写多少代码，而是把 DOM 结构、类名逻辑和事件绑定这三处对齐。常见错误是：按钮没绑事件、classList.toggle() 写错目标元素、CSS 中 transform 或 width 没设初始值导致动画失效。
- 侧边栏容器（比如
<aside id="sidebar">）必须有明确的position: fixed或absolute，否则会挤占主内容流 - 按钮的
onclick或addEventListener必须指向正确的元素 ID，别手误写成"sideber"这类拼写错误 - 推荐用
transform: translateX(-100%)控制隐藏，比display: none更利于动画衔接
CSS 里怎么写侧边栏的展开/收起动画
靠 transition 配合 transform 是最稳定的方式。不要用 max-height 或 opacity + height 做渐显——高度不确定时容易跳变，且无法真正“移出视口”。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
aside#sidebar {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
background: #333;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
aside#sidebar.active {
transform: translateX(0);
}注意：transition 必须写在基础状态（非 .active）上；transform 初始值必须是可计算的，不能是 translateX(calc(-100% - 1px)) 这种带 calc 的表达式，部分老浏览器不支持。
JavaScript 绑定点击事件时的三个易错点
很多失败案例其实卡在 JS 执行时机或作用域上，不是逻辑问题。
-
document.getElementById("toggle-btn").addEventListener("click", ...)要确保脚本在 DOM 加载完之后运行，要么放</body>前，要么包在DOMContentLoaded里 - 别漏掉
event.preventDefault()—— 如果按钮是<a href="#">类型，不加它会触发页面跳转，侧边栏闪一下就没了 - 用
classList.toggle("active")而不是className = "active"，后者会清空所有已有 class，比如你之前加的"sidebar-dark"就丢了
移动端适配时必须处理的遮罩层（overlay）
侧边栏展开后，主内容区域通常要加半透明遮罩并禁止滚动，否则用户一滑屏幕，侧边栏就关了，体验断裂。
做法很简单：在 <body> 下追加一个 <div id="overlay">，CSS 设为 position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998;，然后在 JS 里同步控制它的 classList.toggle("show")。
重点：iOS Safari 对 overflow: hidden 在 <body> 上的支持不稳定，所以靠遮罩层拦截触摸事件更可靠；同时记得给 #overlay.show 加 display: block，不然默认 display: none 会让它不响应点击。
这个遮罩层本身不复杂，但漏掉它，整个交互在手机上基本算失败了一半。
