响应式导航栏汉堡菜单点击无响应问题排查

问题原因分析 #

你的代码核心问题出在CSS选择器的匹配逻辑：

• 移动端媒体查询中，你设置了.navbar-links ul { display: none; }来隐藏菜单列表
• 但JS切换的是.navbar-links的active类，对应的CSS是.navbar-links.active { display: flex; }——这个样式仅控制.navbar-links容器的显示状态，无法覆盖内部ul的display: none，所以点击汉堡按钮后列表依然不会显示。

修复代码 #

调整CSS（关键修改） #

把移动端媒体查询中的.navbar-links.active样式替换为：

@media (max-width: 650px){
  /* 保留其他原有样式，仅修改以下内容 */
  .navbar-links.active ul{
      display: flex;
  }
}

你的JS代码本身无语法错误，只需确保front.js文件路径正确，且HTML中脚本放在<body>底部（你的代码已满足此要求），保证DOM元素加载完成后再执行JS逻辑。

更简便的实现方式 #

方式1：用CSS :has()伪类彻底移除JS #

现代浏览器支持:has()伪类，可直接通过汉堡按钮状态控制菜单显示，无需编写JS：

/* 修改移动端CSS区块 */
@media (max-width: 650px){
  .toggle-button{
      display: flex;
  }
  .navbar-links{
      width: 100%;
  }
  .navbar-links ul{
      flex-direction: column;
      width: 100%;
      display: none;
  }
  /* 新增：当汉堡按钮被点击触发:target状态时，显示菜单列表 */
  .navbar:has(.toggle-button:target) .navbar-links ul{
      display: flex;
  }
  /* 保留其他原有样式 */
}

注：:target伪类依赖汉堡按钮的href="#"，点击后URL会带锚点；若不想改变URL，可改用checkbox+label结构结合:checked伪类实现。

方式2：简化JS代码 #

用querySelector替代getElementsByClassName，代码更简洁直观：

const toggleButton = document.querySelector('.toggle-button');
const navbarLinksUl = document.querySelector('.navbar-links ul');

toggleButton.addEventListener('click', () => {
    navbarLinksUl.classList.toggle('active');
});

同时对应调整CSS：

.navbar-links ul.active {
  display: flex;
}

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