点击后移动汉堡菜单不关闭

Question

我不明白为什么我的移动菜单在点击菜单链接后没有关闭。我该怎么解决这个问题？

(() => {
const menuButton = document.querySelector(".menu-button");
const menuOverlay = document.querySelector(".menu-overlay");
const items = document.querySelectorAll(".nav__item");
menuButton.addEventListener("click", function () {
menuButton.classList.toggle("active");
menuOverlay.classList.toggle("open");
});
items.forEach((navItem) => {
menuButton.classList.remove("active");
menuOverlay.classList.remove("open");
});
})();

HTML

<nav class="nav__items">
<a class="nav__item" href="#about">
About us
</a>
<a class="nav__item" href="#dogs">
Available puppies
</a>
<a class="nav__item" href="#gallery">
Gallery
</a>
<a class="nav__item" href="#testimonials">
Testimonials
</a>
<a class="nav__item" href="#contacts">
Contact us
</a>
</nav>;

Answer 1

它应该是类似的东西

(() => {
const menuButton = document.querySelector(".menu-button");
const menuOverlay = document.querySelector(".menu-overlay");
const items = document.querySelectorAll(".nav__item");
menuButton.addEventListener("click", function () {
menuButton.classList.toggle("active");
menuOverlay.classList.toggle("open");
});
items.forEach((navItem) => {
navItem.addEventListener("click", () => {
menuButton.classList.remove("active");
menuOverlay.classList.remove("open");
});
});
})();