卡在汉堡菜单上

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");
}