移动菜单未在选择时关闭

Question

我有一个出现在较小设备上的移动菜单，除了进行选择时，移动菜单仍然显示，即使我的代码应该隐藏它。

感谢您抽出时间

下面是我在手机菜单中使用的js代码

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");
const navLogo = document.querySelector("#navbar__logo");
// Display Mobile Menu
const mobileMenu = () => {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
};
menu.addEventListener("click", mobileMenu);
//  Close mobile Menu when clicking on a menu item
const hideMobileMenu = () => {
const menuBars = document.querySelector(".is-active");
if (window.innerWidth <= 768 && menuBars) {
menu.classList.toggle("is-active");
menuLinks.classList.remove("active");
}
};
menuLinks.addEventListener("click", hideMobileMenu);
navLogo.addEventListener("click", hideMobileMenu);

这是移动菜单html

<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
<a href="#home" id="navbar__logo">TEST</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="#home" class="navbar__links" id="home-page">Home</a>
</li>
<li class="navbar__item">
<a href="#about" class="navbar__links" id="about-page">About</a>
</li>
<li class="navbar__item">
<a href="#practices" class="navbar__links" id="practices-page"
>Practice</a
>
</li>
<li class="navbar__btn">
<a href="#contact" class="button" id="contact-page">Contact</a>
</li>
</ul>
</div>
</nav>

Answer 1

创建这个片段是为了尝试重现问题，而我没有看到或理解问题？

1. 用户可以点击移动导航图标(3条(，并使其显示"；nav">
2. 用户可以点击导航项目
3. 当用户点击导航项目时，它会关闭移动导航

如果有其他情况，或者我不理解这个问题，请随时将此代码片段插入您的问题中，并添加更多详细信息。也不确定为什么window.innerWidth在那个条件中必须小于768。

此外，您可能只需要运行mobileMenu((函数，而不是在if子句中重写它：

if (window.innerWidth <= 768 && menuBars) {
menu.classList.toggle("is-active");
menuLinks.classList.remove("active");
}

可以变成：

if (window.innerWidth <= 768 && menuBars) {
mobileMenu();
}

const menu = document.querySelector("#mobile-menu");
const menuLinks = document.querySelector(".navbar__menu");
const navLogo = document.querySelector("#navbar__logo");
// Display Mobile Menu
const mobileMenu = () => {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
};
menu.addEventListener("click", mobileMenu);
//  Close mobile Menu when clicking on a menu item
const hideMobileMenu = () => {
const menuBars = document.querySelector(".is-active");
if (window.innerWidth <= 768 && menuBars) {
menu.classList.toggle("is-active");
menuLinks.classList.remove("active");
}
};
menuLinks.addEventListener("click", hideMobileMenu);
navLogo.addEventListener("click", hideMobileMenu);

.navbar__menu {
display: none;
}
.navbar__menu.active {
display: flex;
}
.navbar__toggle {
height: 1rem;
}
.navbar__toggle .bar {
background: green;
height: 5px;
width: 5px;
padding: 3px;
display: block;
border: 1px solid black;
content: 'x';
}
#mobile-menu {
display: flex;
}
#mobile-menu.is-active {
background: green;
}

<!-- Navbar Section -->
<nav class="navbar">
<div class="navbar__container">
<a href="#home" id="navbar__logo">TEST</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="#home" class="navbar__links" id="home-page">Home</a>
</li>
<li class="navbar__item">
<a href="#about" class="navbar__links" id="about-page">About</a>
</li>
<li class="navbar__item">
<a href="#practices" class="navbar__links" id="practices-page"
>Practice</a
>
</li>
<li class="navbar__btn">
<a href="#contact" class="button" id="contact-page">Contact</a>
</li>
</ul>
</div>
</nav>