点击移动端菜单图标触发Uncaught TypeError的JS问题

点击汉堡图标抛出Uncaught TypeError是以下几个写法错误导致的：

• 选择器写法错误：JS中获取导航容器时写的document.querySelector("navbar")是匹配<navbar>标签，但实际HTML中导航是带id="navbar"的<nav>元素，id选择器需要加#前缀，这行代码最终获取到的nav值为null，调用classList.toggle()时直接触发类型错误。
• 类操作目标不匹配：CSS中控制显隐的规则是.nav-links.active，即给class为nav-links的ul加active类才会显示菜单，但原JS是给外层nav容器切active类，完全没命中CSS规则，就算选择器改对了菜单也不会正常弹出。
• 变量命名冲突：querySelectorAll(".nav-links")的forEach回调里参数命名为nav，和外层获取的导航容器变量重名，容易引发意料之外的逻辑问题，且页面中只有一个.nav-links元素，没必要用querySelectorAll取集合。

修正后的JS代码 #

"use strict";

const hamburgerIcon = document.querySelector(".hamburger-icon");
// 直接获取菜单ul元素，不需要取集合
const navLinks = document.querySelector(".nav-links");
// 修正id选择器写法，加#前缀
const nav = document.querySelector("#navbar");

hamburgerIcon.addEventListener("click", () =>{
   // 给菜单ul切换active类，匹配CSS显隐规则
   navLinks.classList.toggle("active");
});

// 可选：点击菜单项后自动关闭菜单，不需要可以删除这段
navLinks.querySelectorAll("a").forEach(link => {
  link.addEventListener("click", () => {
    navLinks.classList.remove("active");
  })
})

补全CSS基础样式 #

原CSS只写了active状态的样式，需要补上默认隐藏的规则，否则菜单会一直显示：

/* 移动端默认隐藏菜单 */
.nav-links {
  display: none;
}
/* 激活状态显示菜单 */
.nav-links.active{
  display: block;
}

原有HTML结构不需要修改，替换上述代码后点击汉堡图标即可正常触发菜单显隐交互。

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