折叠式侧边导航栏需CSS transform配合JavaScript切换类实现，HTML无法独立完成交互；正确做法是用translateX(-100%)隐藏并保留可访问性，避免display:none导致过渡失效，同时兼顾键盘导航与屏幕阅读器支持。

折叠式侧边导航栏的核心是 CSS transform + JavaScript 切换类

纯 HTML 无法实现折叠/展开交互，必须配合 CSS 控制宽度/位移 + JS 响应点击。常见错误是只写 display: none 切换，导致子菜单无法平滑过渡或父容器不收缩。正确做法是用 transform: translateX(-100%) 隐藏，保留文档流和可访问性。

• 侧边栏容器设固定 width（如 240px），折叠时用 transform: translateX(-100%) 移出视口
• 触发按钮（如汉堡图标）绑定 click 事件，切换侧边栏元素的 is-collapsed 类
• 为 transform 和 opacity 添加 transition，避免生硬跳变
• 记得在折叠状态下给 body 加 overflow-x: hidden，防止横向滚动条闪现

HTML 结构要区分“触发器”和“导航容器”

结构松散或层级错位会导致 JS 找不到目标元素，或点击穿透到背景。常见错误是把按钮塞进 <nav> 内部，结果折叠后按钮一起消失。

• 按钮独立放在 <header> 或页面顶部，用 data-target="#sidebar" 显式关联
• 侧边栏用 <nav id="sidebar"> 包裹，内部用语义化 <ul><li><a>
• 每个菜单项若带子菜单，用 <details><summary> 可免 JS 实现基础展开（但不支持动画）；否则需额外加 aria-expanded 和 aria-controls

JavaScript 只需 toggle class，别手动改 style

直接操作 element.style.transform 会覆盖 CSS 中定义的 transition，且难以维护。用 class 切换是最可控的方式。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

const toggleBtn = document.querySelector('[data-toggle="sidebar"]');
const sidebar = document.querySelector('#sidebar');

toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('is-collapsed');
  toggleBtn.setAttribute(
    'aria-expanded',
    sidebar.classList.contains('is-collapsed') ? 'false' : 'true'
  );
});

• 监听 click 即可，不用 touchstart —— 现代浏览器自动兼容移动端点击
• 避免用 getElementsByClassName，优先选 querySelector，更精准
• 记得同步更新 aria-expanded 属性，这对屏幕阅读器用户是刚需

移动端适配关键：用 max-width 媒体查询重置折叠状态

PC 上默认展开、移动端默认折叠是合理策略，但很多人忘了在小屏下强制应用 is-collapsed，导致首次加载时侧边栏遮挡内容。

立即学习“前端免费学习笔记（深入）”；

• 在 CSS 中写 @media (max-width: 768px) { #sidebar { transform: translateX(-100%); } }
• 不要依赖 JS 在 onload 后判断宽度再加 class —— 有 FOUC 风险，且 SSR 场景下不可靠
• 如果使用 Vue/React，注意服务端渲染时初始 class 要和服务端一致，否则 hydration 报错

实际交互中最容易被忽略的是键盘可访问性：折叠后按 Tab 键仍能聚焦到隐藏菜单项。必须配合 is-collapsed 类设置 visibility: hidden 和 pointer-events: none，同时用 aria-hidden="true" 告诉辅助技术跳过这部分。