屏幕宽度<768px时汉堡按钮仅生效2次，如何实现无限触发？

问题根源 #

1. DOM节点重复添加失效：你仅克隆了一次导航节点，第一次点击将其加入侧边栏后，该节点已属于侧边栏DOM树，后续再调用appendChild不会产生任何效果（同一DOM节点无法同时存在于两个位置）。
2. 条件判断逻辑错误：overlay.style.left < 500是字符串比较逻辑，"-500px"与"0px"的字符串对比结果不符合预期，导致两次点击后状态逻辑混乱。
3. 状态管理不严谨：直接操作元素style属性控制显示，容易出现判断误差，不如用CSS类切换更可靠。

修复方案 #

通过CSS类切换控制侧边栏状态，提前完成导航节点的克隆与放置，确保每次点击都能正确触发切换：

修改后的HTML

<header class="header">
  <div class="content">
    <div class="learn_more">
      <p>Слушайте музыку в высоком качестве и без рекламы</p>
    </div>
    <nav class="nav">
      <div class="main_nav">
        <div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div>
        <ul class="nav-menu">
          <li><a href="index.html">Главная</a></li>
          <li><a href="index_two.html">Дискография</a></li>
          <li><a href="index_three.html">Альбомы</a></li>
        </ul>
      </div>
      <div class="other_nav">
        <div class="searth">
          <a href="#"><img src="assets/img/search.svg" alt=""></a>
          <button class="subscribe">Поиск</button>
        </div>
      </div>
      <div class="overlay">
        <ul class="nav-menu-mobile"></ul>
      </div>
      <div class="burger"></div>
    </nav>
  </div>
</header>

修改后的CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

p {
  font-family: 'Inter';
}

.content {
  width: 100vw;
  margin: 0 auto;
}

.learn_more {
  background-color: #111131;
}

.learn_more>p {
  text-align: center;
  color: #ABABFA;
  padding: 8px 0px;
  font-size: 0.8125em;
}

nav {
  justify-content: space-between;
  display: flex;
}

.nav {
  padding: 22px 36px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}

.main_nav {
  display: flex;
}

.nav-menu {
  flex-wrap: wrap;
  padding-left: 36px;
  display: flex;
  align-items: center;
}

li {
  list-style-type: none;
}

ul>li {
  padding-left: 24px;
}

ul>li>a {
  font-family: 'Inter';
  font-weight: 400;
  text-decoration: none;
  font-size: 0.875em;
  color: #413E52;
}

.other_nav {
  display: flex;
}

.burger {
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: #5b64fb;
  display: none;
  border-radius: 50px;
}

.overlay {
  height: 50vh;
  width: 50vw;
  background: #a1a1cb;
  display: flex;
  left: -500px;
  position: relative;
  transition: left 0.9s ease;
}

/* 添加激活类控制侧边栏显示 */
.overlay.active {
  left: 0;
}

@media (max-width: 768px) {
  .other_nav,
  .main_nav > .nav-menu {
    display: none;
  }
  .burger {
    display: block;
  }
  .main_nav {
    display: none;
  }
  .nav {
    padding-left: 0px;
  }
}

修改后的JavaScript

const burger = document.querySelector('.burger');
const overlay = document.querySelector('.overlay');
const navMenu = document.querySelector('.nav-menu').cloneNode(true);
const mobileMenuContainer = document.querySelector('.overlay .nav-menu-mobile');

// 初始化：将克隆的导航菜单放入侧边栏容器
mobileMenuContainer.appendChild(navMenu);

burger.addEventListener('click', function(e) {
  e.preventDefault();
  // 通过切换类实现侧边栏显示/隐藏切换
  overlay.classList.toggle('active');
});

修复说明 #

1. 提前完成DOM节点放置：初始化时就把克隆的导航菜单放入侧边栏，避免重复添加节点导致的失效问题。
2. 类切换替代直接操作style：用active类控制侧边栏位置，逻辑清晰且状态判断更准确。
3. 消除字符串判断误差：不再依赖style.left的字符串值判断状态，通过类的存在与否确定当前显示状态。

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