汉堡菜单JS函数仅主页生效，其他页面失效问题求助

• DOM加载时机不匹配
  主页可能刚好在DOM完全渲染后执行JS，但其他页面可能JS运行时，汉堡按钮等元素还没加载出来，导致无法绑定事件。解决办法是把代码包裹在DOM加载完成的监听事件里：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的汉堡菜单逻辑
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');
    if (hamburger && navMenu) {
      hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        navMenu.classList.toggle('active');
      });
    }
  });
  

  另外检查JS文件的引入位置，尽量放在<body>标签末尾，确保DOM先于JS加载。

• 元素选择器冲突
  其他页面可能存在同名的类名元素，导致querySelector获取到了错误的目标。可以给汉堡按钮和导航菜单添加唯一ID，用更精确的选择器定位：

  const hamburger = document.getElementById('site-hamburger');
  const navMenu = document.getElementById('site-nav-menu');
  

  同时打开浏览器开发者工具（F12），在其他页面控制台执行选择器代码，确认是否能正确获取到元素。

• 浏览器缓存干扰
  其他页面可能缓存了旧版的JS文件，强制刷新页面（Ctrl+F5）测试是否恢复正常。也可以在JS文件引入时添加版本号，避免缓存：

  <script src="nav.js?v=20240520"></script>
  

• 页面DOM结构隐藏差异
  即使导航栏视觉上一致，其他页面可能将导航栏嵌套在了不同的父元素中，或者存在动态生成的DOM节点，导致选择器无法匹配。检查其他页面的导航栏DOM结构，确认选择器路径是否正确。

• JS文件加载顺序问题
  确认其他页面的JS引入顺序和主页完全一致，如果页面中引入了其他框架或脚本，可能存在变量污染或覆盖的情况，导致你的菜单函数无法正常执行。

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