网站移动端菜单JavaScript失效问题求助

核心问题 #

1. 缺少menu-btn类的CSS规则：你的JS逻辑是点击汉堡按钮给nav添加menu-btn类、点击关闭按钮移除该类，但SCSS中没有定义这个类对应的显示样式，导致菜单始终处于隐藏状态。
2. CSS变量未声明：代码中使用了var(--primary-color)和var(--secondary-color)但未在根元素定义，会导致导航栏背景、文字颜色失效。

修复步骤 #

1. 补充CSS变量定义 #

在SCSS最顶部添加根变量声明（替换为你需要的颜色值）：

:root {
  --primary-color: #202020; // 示例主色调
  --secondary-color: #ffffff; // 示例次色调
}

2. 添加menu-btn类的显示规则 #

在SCSS中添加以下代码，确保添加menu-btn类时导航菜单正常显示：

nav.menu-btn {
  display: block;
}

3. 优化样式优先级（可选） #

原代码中.navbar nav设置了display: none，为了确保menu-btn能稳定覆盖这个规则，也可以把样式写成：

.navbar nav.menu-btn {
  display: block;
}

验证修复 #

完成以上修改后：

• 点击汉堡图标，nav会添加menu-btn类并显示侧边菜单
• 点击关闭图标，nav移除menu-btn类并隐藏菜单

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