响应式网站Hamburger Menu点击无响应问题求助

以下是针对汉堡菜单点击无响应问题的逐一排查方向及修复方法：

1. 检查元素选择器是否匹配 #

确保JS中用于获取汉堡菜单元素的选择器，与HTML中的id/class完全一致：

• 若HTML中汉堡按钮是 <button class="hamburger-btn">，JS中必须用 document.querySelector('.hamburger-btn')（类选择器带.）
• 若HTML中是 <div id="hamburger">，则JS需用 document.querySelector('#hamburger')（ID选择器带#）
• 控制台若出现Cannot read properties of null (reading 'addEventListener')报错，直接说明元素选择器不匹配或元素未找到

2. 确认DOM加载顺序 #

如果JS代码写在HTML结构之前，DOM还未渲染完成就执行了事件绑定，会导致绑定失效：

• 修复方法：将JS代码移至</body>标签前；或用DOMContentLoaded包裹事件绑定逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const hamburger = document.querySelector('.hamburger');
  const navMenu = document.querySelector('.nav-menu');
  
  hamburger.addEventListener('click', function() {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
  });
});

3. 排查CSS覆盖问题 #

汉堡菜单可能被其他元素遮挡，导致点击事件无法触发：

• 检查汉堡菜单元素的CSS，确保设置了足够高的z-index（如z-index: 999;），同时确认cursor: pointer;已添加，保证鼠标悬停时显示可点击状态
• 检查媒体查询中，汉堡菜单在小屏幕下的display属性是否为block（而非none）

4. 验证类切换逻辑 #

确保JS中切换active类的代码正确：

• 错误写法：直接覆盖类名 hamburger.className = 'active'（会丢失原有类）
• 正确写法：使用classList.toggle()实现类的添加/移除：

hamburger.addEventListener('click', function() {
  // 同时切换汉堡按钮和导航菜单的active类
  this.classList.toggle('active');
  document.querySelector('.nav-menu').classList.toggle('active');
});

5. 检查CSS媒体查询的显示逻辑 #

确认媒体查询中导航菜单的显隐逻辑与active类绑定正确：

@media (max-width: 768px) {
  /* 默认隐藏导航菜单 */
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 60px;
    width: 100%;
    background: #fff;
    transition: left 0.3s ease;
  }
  /* 添加active类后显示导航菜单 */
  .nav-menu.active {
    left: 0;
  }
  /* 小屏幕下显示汉堡按钮 */
  .hamburger {
    display: block;
    cursor: pointer;
  }
}

最后一步：查看控制台报错 #

按F12打开开发者工具，切换到Console面板，查看是否有语法错误、未定义变量等问题，这些往往是导致事件失效的直接原因。

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