多页面添加汉堡菜单遇问题：仅INDEX.html生效，其他页面失效

• 检查资源文件路径
  新手最容易踩的坑：首页（index.html）和其他页面（如about.html、contact.html）的文件位置可能不同。比如首页在根目录，about页面放在/about/子文件夹里，那引用JS/CSS的路径就得调整：

  • 首页里的引用：<script src="script.js"></script>
  • about页面里要改成：<script src="../script.js"></script>（../表示返回上一级目录）
    验证方法：打开其他页面的浏览器控制台（右键→检查→Console），如果看到404 Not Found提示，就是路径错了。

• 核对HTML元素的类名/ID
  汉堡菜单的JS是通过选择器（比如document.querySelector('.hamburger')）找到按钮和菜单的，如果其他页面里的元素类名、ID和首页不一致（比如拼写错误：把hamburger写成hamberger），JS就找不到目标元素，功能自然失效。
  检查方法：右键汉堡按钮→检查，对比首页对应元素的类名、ID，确保完全一致。

• 确认JS代码的加载时机
  如果JS代码写在<head>标签里，且没有等待DOM加载完成就执行，其他页面可能因为DOM还没渲染好，JS找不到元素。
  正确做法：要么把JS代码放在</body>标签的前面（页面最后），要么给JS加DOM加载完成的监听：

  document.addEventListener('DOMContentLoaded', function() {
    // 汉堡菜单的JS代码写在这里
  });
  

  对比首页和其他页面的JS代码位置，确保加载时机一致。

• 排查JS代码冲突
  如果其他页面添加了额外的JS代码，可能和汉堡菜单的JS冲突（比如变量名重复、事件被覆盖）。
  临时解决方法：删掉其他页面的非汉堡菜单JS代码，测试功能是否恢复。如果恢复了，再逐个添加回去，找到冲突的代码。

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