单击菜单项关闭导航栏

Question

当我在网站的移动版本时，当点击其中一个菜单项时，我的导航栏会消失。我知道这里已经有类似的问题，但大多数的解决方案是使用jquery，我真的是新的javascript，所以我有麻烦:/我真的很感激一些帮助与此，我在我的智慧的尽头!

问题:在手机上，我有一个菜单按钮，打开一个全屏导航栏与我的菜单项。点击按钮工作完美，它使导航条出现和消失。但是，当点击其中一个链接时，它会滚动到页面上的正确位置，但导航栏保持打开状态。我尝试在菜单项中添加eventListener，就像菜单按钮一样，但根本不起作用…

代码如下:

HTML

<nav>
<div class="logo">
<a href="#"
><img
src="./images/original_white.png"
alt="disco milk logo"
width="300px"
height="auto"
class="logo-still"
/></a>
</div>
<div class="menunav">
<ul class="nav-links">
<li>
<a href="#about">about us</a>
</li>
<li><a href="#say-hello">say hello!</a></li>
</ul>
<div class="burger">
<img
src="./images/menu_icon.png"
alt="menu icon"
class="burger-icon"
/>
</div>
</div>
</nav>

CSS

nav {
width: 100vw;
padding-left: 37px;
padding-right: 37px;
}
.nav-links {
position: absolute;
right: 0px;
height: 100vh;
width: 100vw;
background-color: #231f20;
z-index: 1;
top: 0px;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(100%);
justify-content: center;
transition: transform 0.5s ease-in;
}
.nav-links li {
padding: 10px;
opacity: 0;
}
.nav-active {
transform: translateX(0%);
}

和JS

const navSlide = ()=>{
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', ()=>{
// Toggle Nav
nav.classList.toggle('nav-active');
// Animate Links
navLinks.forEach((link, index)=>{
if(link.style.animation){
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});

}
navSlide();

我真的很感谢任何帮助!!非常感谢:)

Answer 1

// insert this after your js variables
document.querySelectorAll(".nav-links li a").forEach(item => {
item.addEventListener('click', ()=>{
// Toggle Nav
nav.classList.toggle('nav-active');
});
});
// I think you get the idea