使用原生JavaScript（Vanilla JS）切换导航栏元素类名

Hey there! 我来帮你搞定这个汉堡图标触发的导航菜单交互，用纯原生JS就能实现，完全不需要依赖任何框架。

需求回顾 #

你需要实现的是：点击汉堡图标时，切换HTML中class为header-list的<ul>元素的类名，将其切换为header-list-open，以此来控制导航菜单的显示/隐藏。

实现步骤&代码示例 #

首先，我们需要确保HTML里有一个汉堡按钮（你原代码里没提到，所以得补上），然后写JS逻辑和配套的CSS来控制显示状态。

1. 补全后的HTML结构

<body>
  <!-- Start of Navigation Bar -->
  <header>
    <div class="nav-container">
      <nav>
        <h2 class="company-name">Sustained Garden Co</h2>
        <!-- 汉堡按钮，用button更符合语义，也利于无障碍访问 -->
        <button class="hamburger-btn" aria-label="Toggle navigation menu">
          ☰
        </button>
        <ul class="header-list">
          <!-- 导航链接示例 -->
          <li><a href="#">Home</a></li>
          <li><a href="#">Our Plants</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

2. 配套CSS（控制菜单显示/隐藏）

/* 默认隐藏移动端导航菜单 */
.header-list {
  display: none;
  list-style: none;
  padding: 1rem 0;
  margin: 0;
  background-color: #f8f9fa;
}

/* 切换类名后显示菜单 */
.header-list-open {
  display: block;
}

/* 汉堡按钮样式，可根据需求自定义 */
.hamburger-btn {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* 桌面端适配：默认显示菜单，隐藏汉堡按钮 */
@media (min-width: 768px) {
  .hamburger-btn {
    display: none;
  }
  
  .header-list {
    display: flex;
    gap: 2rem;
    background: none;
  }
}

3. 原生JavaScript逻辑

// 获取需要操作的DOM元素
const hamburgerBtn = document.querySelector('.hamburger-btn');
const headerNavList = document.querySelector('.header-list');

// 给汉堡按钮绑定点击事件
hamburgerBtn.addEventListener('click', () => {
  // 自动切换类名：有则移除，无则添加
  headerNavList.classList.toggle('header-list-open');
});

关键代码解释 #

• document.querySelector()：通过类名精准获取我们需要操作的DOM元素（汉堡按钮和导航列表）
• addEventListener('click', ...)：给汉堡按钮添加点击事件监听，点击时执行回调函数
• classList.toggle()：这是原生JS里超实用的方法——它会自动检测元素是否包含指定类名：如果有就移除，没有就添加，完美实现类名的切换效果，不用自己写复杂的判断逻辑

这样一来，点击汉堡图标时，导航菜单就会在显示和隐藏之间无缝切换啦～

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