如何用JavaScript实现响应式导航栏切换？排查汉堡图标点击无响应问题

核心问题：CSS选择器错误 #

你当前的CSS里，针对导航栏激活状态的选择器写错了：

/* 错误写法：选中的是.navbar下带active类的子元素 */
header .navbar .active {
    top: 70px;
}

而你的JavaScript逻辑是给.navbar元素本身添加active类，所以正确的选择器需要去掉.navbar和.active之间的空格：

/* 正确写法：选中带有active类的.navbar元素 */
header .navbar.active {
    top: 70px;
}

这个错误会导致即使JS成功添加了active类，CSS样式也不会生效，导航栏自然无法展开。

额外排查项 #

1. 确保JavaScript在DOM加载完成后执行
   如果你的<script>标签放在<head>里，浏览器会在DOM元素加载前执行JS，导致document.querySelector找不到#menu-icon和.navbar元素，点击事件根本无法绑定。解决方法二选一：

   • 把script标签移到</body>标签的前面：

     </body>
     <script src="script.js"></script>
     </html>
     

   • 给script标签添加defer属性：

     <script src="script.js" defer></script>
     

2. 检查header的定位属性
   因为你的.navbar用了position: absolute，需要确保父元素<header>设置了position: relative，否则导航栏会相对于整个页面定位，可能出现位置异常：

header {
    position: relative;
}

3. 验证元素选择器匹配
   可以在浏览器控制台执行以下代码，确认JS能正确找到目标元素：

console.log(document.querySelector("#menu-icon"));
console.log(document.querySelector(".navbar"));

如果输出null，说明类名/id存在拼写错误，需要核对HTML与JS代码的匹配性。

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