JavaScript实现的汉堡菜单仅首页生效子页失效问题求助

• JS绑定逻辑校验
  首先打开浏览器控制台查看是否有JS报错，当前汉堡菜单的JS逻辑没有做DOM存在性判断，也没有等待DOM加载完成再执行，如果子页有其他报错阻塞了代码执行，或者JS加载速度比DOM渲染快，都会导致事件绑定失败。建议修改JS代码如下，增加非空判断和DOM加载完成监听：

  document.addEventListener('DOMContentLoaded', () => {
    const mainMenu = document.querySelector('.mainMenu');
    const closeMenu = document.querySelector('.closeMenu');
    const openMenu = document.querySelector('.openMenu');
    // 避免元素不存在时报错阻塞后续代码
    if (!mainMenu || !closeMenu || !openMenu) return
    openMenu.addEventListener('click', show)
    closeMenu.addEventListener('click', close)
    function show() {
      mainMenu.style.display = 'flex'
      mainMenu.style.top = '0'
    }
    function close() {
      mainMenu.style.top = '-120%'
    }
  })
  

• Sass编译结果校验
  确认Sass修改后已经重新编译生成了最新的style.css文件，且子页引用的路径正确。强制清除浏览器缓存刷新页面（Windows按Ctrl+F5，Mac按Command+Shift+R），避免使用了旧的缓存样式文件。
• 样式覆盖排查
  如果子页有单独引入其他CSS文件，或者存在针对header、nav、.mainMenu、.openMenu的其他样式，可能会覆盖汉堡菜单的默认样式。可以用浏览器开发者工具的元素检查器，选中.openMenu元素，查看768px宽度下的display计算属性是否为block，是否被其他更高优先级的样式覆盖。
• 层级冲突排查
  如果子页存在其他设置了z-index的固定定位元素，且层级大于header设置的10000，会遮挡汉堡菜单的点击区域，导致点击无响应。用开发者工具的元素选择器点击汉堡菜单位置，若选中的不是.openMenu元素，调整对应遮挡元素的z-index值即可。
• 资源路径二次校验
  你当前font-awesome的引用路径为/../fontawesome-free-5.15.4-web/css/all.css，开头的/代表从站点根目录寻址，后续的../会跳出站点根目录，大概率加载失败导致汉堡菜单图标不显示，确认该路径是否正确，相对路径引用可删除开头的斜杠。
• 导航链接跳转校验
  子页当前导航栏的跳转链接都是#，如果需要跳回首页对应的锚点，修改为../index.html#works、../index.html#resume这种格式即可。

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