跟随教程开发导航栏，汉堡菜单点击无响应疑似CSS存在问题

问题原因及修复方案 #

先做基础排查：在你JS的点击事件回调里加一行console.log('点击触发')，点击汉堡菜单看控制台有没有对应输出，先区分是事件绑定失败，还是事件触发了但样式没生效，能更快定位问题。

• CSS选择器优先级冲突（最常见原因）
  你定义.nav-links样式时使用的是nav .nav-links组合选择器，权重为「标签选择器+类选择器」，高于单独的.nav-active类选择器。即使JS成功给元素添加了nav-active类，它的transform: translateX(0%)属性也会被优先级更高的nav .nav-links下的transform: translateX(100%)覆盖，导致视觉上没有任何变化。
  修复方案：将.nav-active选择器修改为nav .nav-links.nav-active，或者删除nav .nav-links前面的nav前缀，保证二者优先级一致即可。

• CSS语法错误
  你提供的CSS代码中，.burger样式结束后多了一个多余的闭合大括号}，部分浏览器会因为这个语法错误，跳过解析后续的.nav-active样式规则，导致样式不生效。
  修复方案：删掉.burger样式后面多余的}即可。

• JS执行时机错误（可选排查）
  如果修改完上述两项问题仍未解决，且之前的基础排查显示点击事件没有触发，检查JS代码的引入位置：如果JS代码放在<head>标签内，且没有监听DOM加载完成事件，代码执行时DOM还未渲染完成，document.querySelector(".burger")会返回null，点击事件自然绑定失败。
  修复方案：将JS引入标签放到</body>闭合标签之前，或者把所有JS代码包裹在DOMContentLoaded事件回调中：

document.addEventListener('DOMContentLoaded', () => {
  console.log("Hello!");

  const navSlide = () => {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");

    burger.addEventListener('click', () => {
      console.log('点击触发')
      nav.classList.toggle('nav-active');
    });
  }

  navSlide();
})

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