如何使用JavaScript实现点击切换折叠侧边栏的开合状态

核心问题 #

你当前的JavaScript逻辑仅固定设置侧边栏打开状态的样式，没有根据当前开闭状态做反向处理，因此点击汉堡按钮只能触发打开操作，无法关闭侧边栏。

修复代码 #

直接替换原有JavaScript函数即可实现切换效果：

function myFunction(x) {
  // 切换汉堡图标动画，同时获取当前是否为打开状态
  const isSidebarOpen = x.classList.toggle("change");
  const sidebar = document.getElementById("mySidebar");
  const content = document.getElementById("content");

  if (isSidebarOpen) {
    // 打开侧边栏
    sidebar.style.width = "250px";
    content.style.marginLeft = "250px";
  } else {
    // 关闭侧边栏
    sidebar.style.width = "0";
    content.style.marginLeft = "0";
  }
}

可选优化建议 #

你可以把样式控制逻辑移到CSS中，避免在JS里硬编码样式值，后续调整更方便：

1. 在CSS中添加对应状态类：

.sidebar-open .sidebar {
  width: 250px;
}
.sidebar-open #content {
  margin-left: 250px;
}

2. 简化JavaScript逻辑，仅切换类即可：

function myFunction(x) {
  x.classList.toggle("change");
  document.body.classList.toggle("sidebar-open");
}

内容的提问来源于stack exchange，提问作者adrvnc