JavaScript 侧边栏折叠展开的核心是通过切换 CSS 类（如 sidebar-collapsed）控制 DOM 显示状态并配合 transition 实现动画，HTML 用语义化结构预留 class，CSS 定义宽高/可见性过渡，JS 绑定点击事件及 localStorage 状态持久化。
JavaScript 实现侧边栏菜单的折叠与展开，核心是控制 DOM 元素的显示状态（如 display、width、overflow）并切换 CSS 类或内联样式，同时配合过渡动画提升体验。关键不在于写多少 JS，而在于结构清晰、样式可控、交互自然。
HTML 结构要语义化且便于控制
侧边栏建议用 <aside> 或带明确 role 的 <nav> 包裹，菜单项用无序列表。为 JS 操作预留 class 名，比如：
<aside id="sidebar" class="sidebar-collapsed">
<ul class="menu-list">
<li><a href="#">首页</a></li>
<li><a href="#">订单管理</a></li>
<li><a href="#">用户中心</a></li>
</ul>
</aside>
<button id="toggleBtn">☰</button>注意：sidebar-collapsed 是初始折叠状态，JS 只需切换这个类即可驱动样式变化。
CSS 控制折叠/展开的视觉表现
用 CSS 定义两种状态，配合 transition 实现平滑动画：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
.sidebar {
width: 240px;
transition: width 0.3s ease, padding 0.3s ease;
overflow-x: hidden;
}
.sidebar-collapsed {
width: 60px;
}
.sidebar-collapsed .menu-list a {
display: none; /* 或用 opacity + visibility 配合过渡 */
}
.sidebar-collapsed .menu-list li::before {
content: "•";
margin-right: 8px;
}小技巧：
- 避免直接操作
display: none/block—— 它无法过渡，改用opacity+visibility或max-height+overflow - 图标可保留在折叠态（如仅显示 logo 或简略 icon），提升可用性
- 给
<main>或容器加margin-left或transform，适配侧边栏宽度变化
JavaScript 绑定点击与状态管理
监听按钮点击，切换 class，并可选存储用户偏好到 localStorage：
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggleBtn');
<p>toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('sidebar-collapsed');</p><p>// 可选：记录状态
const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
localStorage.setItem('sidebarCollapsed', isCollapsed);
});</p><p>// 页面加载时恢复上次状态
if (localStorage.getItem('sidebarCollapsed') === 'true') {
sidebar.classList.add('sidebar-collapsed');
}进阶提示：
- 支持键盘操作：给按钮加
tabindex="0"，监听Enter或Space键 - 响应式场景下，小屏自动折叠（用
matchMedia监听断点） - 若菜单有子菜单，展开/折叠逻辑可递归处理
.submenu元素
用现代 API 简化（可选）
如果项目支持较新浏览器，可用 Element.toggleAttribute() 或 dataset 辅助管理状态：
sidebar.dataset.collapsed = sidebar.classList.contains('sidebar-collapsed');但多数场景中，class 切换已足够简洁可靠。
