移动端导航栏菜单功能失效咨询及简易实现方案求助

问题原因&修复方案 #

核心问题1：CSS显示逻辑错误

你当前代码中导航菜单默认是显示状态，未配置隐藏规则，修改对应CSS代码如下：

/* 原nav选择器新增默认隐藏规则 */
nav {
  position: fixed;
  z-index: 99;
  width: 66%;
  right: 0;
  top: 0;
  background: var(--primary-600);
  height: 100vh;
  padding: 1em;
  /* 新增：默认隐藏菜单 */
  display: none;
}
/* 该类为点击展开后的状态，不需要修改 */
nav.menu-btn {
  display: block;
}

如果想要更顺滑的展开收起动画，可以替换为过渡效果：

nav {
  position: fixed;
  z-index: 99;
  width: 66%;
  right: 0;
  top: 0;
  background: var(--primary-600);
  height: 100vh;
  padding: 1em;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
nav.menu-btn {
  transform: translateX(0);
}

核心问题2：JS执行时机错误

如果你的JS代码放在<head>标签内，会在DOM元素还没渲染完成时就执行，导致获取不到对应元素、事件绑定失效。修改JS代码如下：

// 等待页面DOM全部加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const mobileBtn = document.getElementById("nav-menu");
  // 补全变量声明，避免全局变量污染
  const nav = document.querySelector("nav");
  const mobileBtnExit = document.getElementById("nav-exit");

  mobileBtn.addEventListener("click", () => {
    nav.classList.add("menu-btn");
  });

  mobileBtnExit.addEventListener("click", () => {
    nav.classList.remove("menu-btn");
  });

  // 可选优化：点击菜单外部自动关闭
  document.addEventListener('click', (e) => {
    if (!nav.contains(e.target) && !mobileBtn.contains(e.target)) {
      nav.classList.remove("menu-btn");
    }
  })
})

其他注意事项

• 确保页面已经引入Font Awesome资源，否则菜单按钮和关闭按钮的图标不会显示，无法触发点击事件
• JS代码也可以直接放到HTML文件的</body>闭合标签之前，无需额外加DOMContentLoaded监听

内容的提问来源于stack exchange，提问作者ḞLØҜȈ