汉堡菜单卡住了

Question

我正在制作一个汉堡包菜单，当点击时将显示在整个屏幕上，它工作得很好，但现在我试图使它，当我点击菜单中的选项它带我到我想要的部分，但他们关闭我已经写了这段代码，但它只适用于第一个选项，其他不做任何

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
const onClick = document.querySelector(".nav_item")
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
navMargin.classList.toggle("active");
}
onClick.addEventListener("click", closeham);
function closeham() {
navMenu.classList.toggle("active");
hamburger.classList.toggle("active");
}

/* making the navbar responsive */
.hamburger {
display: none;
margin-right: 20px;
}
.bar {
display: block;
width: 30px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fa900f;
}
@media only screen and (max-width: 1000px) {
.nav_options {
position: absolute;
left: -100%;
top: 4rem;
flex-direction: column;
background-color: #000000;
border: solid 15px #fff;
width: 100%;
height: 1000px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
nav ul li a {
color: #fa900f;
}
.nav_options.active {
left: 0;
}
.nav_item {
margin: 3rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.sec_about.active {
margin-top: 35rem;
}
}

<header>
<nav>
<a href="#"><img src="/images/Logo.png" alt="Logo"></a>
<ul class="nav_options">
<li class="nav_item"><a class="nav_item" href="#About">&ltAbout&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#Skills">&ltSkill&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltWork&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltResume&gt</a></li>
<li class="nav_item"><a class="nav_item" href="#Contact">&ltContact&gt</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

Answer 1

你的代码中有一个小错误。

函数querySelector()只捕获一个满足要求的项。您需要使用querySelctorAll()来分配一个点击事件。基于你在这里张贴的代码，你的新javascript:

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
//Here was a mistake
const onClick = document.querySelectorAll(".nav_options li.nav_item");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
navMargin.classList.toggle("active");
}
//Addational change, because querySelectorAll returns an array of elements
for (i = 0; i < onClick.length;i++) {
onClick[i].addEventListener("click", closeham);
}
function closeham() {
navMenu.classList.toggle("active");
hamburger.classList.toggle("active");
}