JS实现汉堡菜单（hamburger menu）点击显示/展开功能故障求助

核心问题与修复步骤 #

1. 汉堡图标未在移动端显示 #

你的CSS里.hamburger-icon默认是display: none，没有针对小屏幕的显示规则，导致根本点不到图标。添加媒体查询，在小屏幕下显示汉堡、隐藏默认导航：

@media (max-width: 768px) {
  .hamburger-icon {
    display: block;
  }
  .navbar-links ul {
    display: none;
  }
}

2. 缺少激活状态的CSS样式 #

JS里执行了classList.toggle('active')，但没有定义.navbar-links.active的样式，点击后导航不会显示。补充样式：

@media (max-width: 768px) {
  .navbar-links.active ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; /* 紧贴导航栏底部 */
    left: 0;
    width: 100%;
    background-color: #fff; /* 按需设置背景色 */
  }
}

3. 权限/元素未找到错误 #

如果出现权限或找不到元素的报错，大概率是JS执行时机问题——JS在DOM元素加载前就运行了，导致获取不到目标元素。解决方法二选一：

• 把JS代码放在HTML的</body>标签之前；
• 用DOM加载事件包裹JS：

document.addEventListener('DOMContentLoaded', () => {
  const hamburgerIcon = document.getElementsByClassName('hamburger-icon')[0]
  const navbarLinks = document.getElementsByClassName('navbar-links')[0]

  hamburgerIcon.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
  })
})

4. 额外优化：阻止锚点跳转 #

汉堡图标是<a href="#">，点击会触发页面跳转到顶部，加上preventDefault避免这个问题：

hamburgerIcon.addEventListener('click', (e) => {
  e.preventDefault()
  navbarLinks.classList.toggle('active')
})

完整修复后的代码示例 #

HTML #

<nav class="navbar">
  <div class="brand-title">LOGO</div>
  <a href="#" class="hamburger-icon"><i class="fa-solid fa-bars fa-2x"></i></a>

  <div class="navbar-links">
    <ul class="navbar-items">
      <li><a href='./pages/projects.html'>Projects</a></li>
      <li><a href=#>About</a></li>
      <li><a href=#>Contact</a></li>
    </ul>
  </div>
</nav>

CSS #

.brand-title {
  color: #000;
  margin-left: 2rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem;
  position: relative; /* 为绝对定位的导航列表提供参考 */
}

.navbar-links ul {
  margin: 0;
  display: flex;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  text-decoration: none;
  color: #000;
  display: block;
  padding: 1rem 1.5rem;
}

.hamburger-icon {
  display: none;
  color: #000;
  cursor: pointer;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .hamburger-icon {
    display: block;
  }
  .navbar-links ul {
    display: none;
  }
  .navbar-links.active ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
}

JS #

document.addEventListener('DOMContentLoaded', () => {
  const hamburgerIcon = document.querySelector('.hamburger-icon')
  const navbarLinks = document.querySelector('.navbar-links')

  hamburgerIcon.addEventListener('click', (e) => {
    e.preventDefault()
    navbarLinks.classList.toggle('active')
  })
})

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