如何实现单按钮控制侧边栏展开收起 修复切回标签页动作重复问题

• 现有实现依赖按钮的:focus伪类触发侧边栏展开：首次点击按钮获得焦点，侧边栏滑出；再次点击时按钮始终保持聚焦状态，状态不会发生翻转，自然无法通过同一按钮控制收起。
• 切换浏览器标签页返回后自动重复触发展开/收起动画的异常来自两点：一是浏览器重新激活页面时会重算所有元素的:focus、:hover伪类状态，匹配到展开规则就会重新触发过渡动画；二是代码中额外编写的.linkList:hover { right: 0px; }规则会让鼠标悬停在侧边栏区域时强制保持展开状态，进一步加剧了状态混乱问题。

放弃靠CSS伪类控制显隐的方案，改用JavaScript切换自定义类名控制状态，从根源避免焦点、悬停状态带来的异常：

1. 调整CSS代码，删除原有的:focus、:hover触发展开的规则，新增自定义激活类控制侧边栏位置：

.menuButton {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 25px;
  left: 1303px;
  border: none;
  outline: none;
  transition: ease-out 0.5s;
  background-image: url('/Images/Menu_Icon.png');
  background-color: #e0e0e0;
  cursor: pointer;
}

.links {
  font-family: 'comfortaa';
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
  transition: ease-out 0.4s;
}

.links:hover {
  color: #5e00bc;
}

.linkList {
  position: fixed;
  width: 150px;
  height: 100%;
  right: -150px;
  top: 85px;
  transition: ease-out 0.5s;
  background: #e0e0e0;
}

.linkList ul li {
  list-style: none;
  padding: 15px;
}

/* 替换原有伪类触发规则，用激活类控制侧边栏展开 */
.linkList.active {
  right: 0px;
}

2. 调整HTML结构，给按钮和侧边栏加上标识，绑定点击事件切换状态：

<div class='menu'>
  <button class='menuButton' id="menuToggleBtn"></button>
  <div class='linkList' id="sidebar">
    <ul>
      <li><a class='links' href='#'>Link 1</a></li>
      <li><a class='links' href='#'>Link 2</a></li>
      <li><a class='links' href='#'>Link 3</a></li>
      <li><a class='links' href='#'>Link 4</a></li>
      <li><a class='links' href='#'>Link 5</a></li>
      <li><a class='links' href='#'>Link 6</a></li>
      <li><a class='links' href='#'>Link 7</a></li>
    </ul>
  </div>
</div>

<script>
const menuBtn = document.getElementById('menuToggleBtn')
const sidebar = document.getElementById('sidebar')
// 点击按钮切换展开/收起状态
menuBtn.addEventListener('click', (e) => {
  e.stopPropagation()
  sidebar.classList.toggle('active')
})
// 可选：点击侧边栏外区域自动收起，优化交互
document.addEventListener('click', (e) => {
  if (!sidebar.contains(e.target) && !menuBtn.contains(e.target)) {
    sidebar.classList.remove('active')
  }
})
</script>

• 点击同一按钮即可正常切换侧边栏展开/收起状态，不存在状态锁死问题
• 完全移除了对焦点、悬停伪类的显隐依赖，切换标签页返回时不会再自动触发过渡动画
• 可选的点击外部收起逻辑可按需保留，交互逻辑更符合常规侧边栏使用习惯

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