小于768px断点下响应式Navigation bar持续隐藏问题

核心故障原因 #

代码存在3处直接导致功能失效的错误：

• 导航交互的JS逻辑在DOM节点渲染完成前就执行，无法获取到汉堡按钮、关闭按钮、导航菜单的DOM元素，点击事件完全未绑定成功
• 移动端导航菜单的显隐控制类名与JS中操作的类名不匹配，即便事件触发也无法正确切换显示状态
• 导航容器设置了overflow: hidden属性，且固定定位的移动端菜单未设置足够高的层级，会被页面其他元素遮挡或裁切

分步修复方案 #

1. 修正CSS显隐规则 #

移除导航菜单上写死的内联隐藏样式，改用独立状态类控制移动端菜单的显隐，参考代码如下：

/* 桌面端原有导航样式保持不变即可 */
@media screen and (max-width: 767px) {
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* 提升层级保证导航不被其他内容遮挡 */
    background: #fff;
  }
  .nav-menu {
    position: fixed;
    top: 56px; /* 该值与你顶部导航条的高度保持一致 */
    left: 0;
    width: 100%;
    background: #fff;
    transform: translateX(-100%); /* 默认状态下菜单移出视口隐藏 */
    transition: transform 0.3s ease;
    padding: 1.5rem;
  }
  /* 激活类：菜单移入视口显示 */
  .nav-menu.menu-open {
    transform: translateX(0);
  }
  .hamburger-btn, .close-btn {
    display: block; /* 移动端显示汉堡、关闭按钮 */
  }
}
@media screen and (min-width: 768px) {
  .hamburger-btn, .close-btn {
    display: none; /* 桌面端隐藏两个移动端操作按钮 */
  }
}

2. 重写JS交互逻辑 #

将所有导航相关的JS逻辑放到DOM加载完成的回调中执行。

注意：代码中用到的所有类名必须和HTML中定义的class完全一致，拼写、连字符、大小写错误都会直接导致元素获取失败

参考代码如下：

document.addEventListener('DOMContentLoaded', function () {
  // 获取DOM元素
  const hamburgerBtn = document.querySelector('.hamburger-btn');
  const closeBtn = document.querySelector('.close-btn');
  const navMenu = document.querySelector('.nav-menu');

  // 绑定汉堡按钮点击事件：打开菜单
  hamburgerBtn.addEventListener('click', function () {
    navMenu.classList.add('menu-open');
  });

  // 绑定关闭按钮点击事件：关闭菜单
  closeBtn.addEventListener('click', function () {
    navMenu.classList.remove('menu-open');
  });

  // 可选增强：点击菜单外区域自动关闭菜单
  document.addEventListener('click', function (e) {
    if (!navMenu.contains(e.target) && !hamburgerBtn.contains(e.target)) {
      navMenu.classList.remove('menu-open');
    }
  })
})

3. 最终校验 #

修改完成后按以下顺序验证：

• 打开浏览器开发者工具，切换到宽度小于768px的移动端视图，点击汉堡按钮，检查.nav-menu元素是否成功追加menu-open类
• 移除导航栏所有父级元素上的overflow: hidden属性，避免固定定位的菜单被裁切
• 全局搜索CSS规则，确认没有其他样式给导航栏设置了display: none、visibility: hidden、opacity: 0等强制隐藏属性

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