为什么切换活动在下面的代码中不起作用?

Why is toggle active not working in the below code?

我对如何在 Whosebug 上 post 编码的步骤感到困惑。请查看代码笔以获取完整代码:

Codepen

        const hamburger = document.querySelector(".hamburger");
        const navMenu = document.querySelector(".nav-menu");

        hamburger.addEventListener("click", () => {
            hamburger.classList.toggle("active");
            navMenu.classList.toggle("active");         
        })

        document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
            hamburger.classList.remove("active");
            navMenu.classList.remove("active");
        }))

抱歉,正在尝试从头开始玩 html、css 和 javascript 来学习。我想知道如何从头开始制作汉堡菜单。在 youtube 上查找了一些教程。复制了代码。汉堡菜单是可点击的,并变为下拉导航栏。再次点击它,returns 它回到汉堡包菜单。开发人员工具显示汉堡包 class 更改为活动汉堡包,然后返回汉堡包 class。但是当我在导航栏class下添加网格容器代码时,汉堡菜单不再响应点击。我不知道为什么它不再切换到活动状态。有人可以解释一下吗?谢谢

这是一个拼写错误:

<textarea id="descript" name="description" placeholder="detail description*" rows="1" column="8"> </textarea>

您必须关闭“