坚持汉堡菜单

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

坚持汉堡菜单

Stuck with hamburger menu

javascript

dom

hamburger-menu