单击导航 link 时关闭导航菜单覆盖。只有第一个导航 link 有效

Question

我知道以前有人问过这个问题，但这个问题有点曲折。

我看到一些人对这个问题投了反对票。请让我知道您反对投票的原因，以便我将来能够更正此问题。感谢大家的参与。

我有一个单页滚动网站，其导航菜单覆盖在小于 992 像素的屏幕上。菜单切换正常，但是当单击导航 link 时，导航菜单保持打开状态，第一个导航除外 - link.

我喜欢每次 link 单击时关闭导航菜单。

那么如何让所有的导航 link 在点击时关闭导航菜单？我有一种预感，它与使用 querySelectorAll 而不是 querySelector.

有关

这里是 link 网站：https://portfolioprime.github.io/robotics/

如有任何帮助，我们将不胜感激。

这是导航html。

HTML

<body>
  <header>
    
      <nav class="nav">
       
        <!-- Nav Menu -->

        <ul class="nav-list">

          <li class="nav-item">
            <a href="#showcase" class="nav-link">Home</a></li>
          <li class="nav-item">
            <a href="#robots" class="nav-link">Robots</a></li>
          <li class="nav-item">
            <a href="#projects" class="nav-link">Projects</a></li>
          <li class="nav-item">
            <a href="#research" class="nav-link">Research</a></li>
          <li class="nav-item">
            <a href="#explore" class="nav-link">Explore</a></li>
          <li class="nav-item">
            <a href="#prosthetics" class="nav-link">Prosthetics</a></li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact</a></li>
        </ul>

        <!-- Menu-toggle -->
        <div class="menu-toggle">
          <i class="fas fa-bars"></i>
          <i class="fas fa-times"></i>
        </div>

      </nav>
    
  </header>

</body>

这是 Javascript。

JS

// Select element function
const selectElement = function (element) {
    return document.querySelector(element);
};

let menuToggler = selectElement('.menu-toggle');
let body = selectElement('body');
let menuClose = selectElement('.nav-link');

// Open/Close menu on .menu-toggle click
menuToggler.addEventListener('click', function () {
    body.classList.toggle('open');
});

// Close menu on .nav-link click
menuClose.addEventListener('click', function () {
    body.classList.remove('open');
});

您可能对 .open class 的 CSS 感兴趣，它附加到正文 javascript。

CSS

  .open .nav-list {
    bottom: 0;
  }
  .nav-link:hover {
    border-bottom: none;
  }
  .menu-toggle {
    display: block;
  }
  .open .menu-toggle .fa-bars {
    display: none;
  }
  .open .menu-toggle .fa-times {
    display: block;
    position: fixed;
    right: 2.7rem;
    top: 2rem;
  }

Answer 1

你的预感完全正确。这样做。

// Select element function
const selectElement = (element) =>
  document.querySelector(element);
const getAllWithClass = (className) =>
  document.getElementsByClassName(className);

const
  body = selectElement('body'),
  // Converts the returned collection to a proper Array
  navLinks = Array.from(getAllWithClass("nav-link"));

// Close menu on .nav-link click
navLinks.forEach(link => { // The Array method `forEach` loops through
  link.addEventListener('click', function() {
    body.classList.remove('open');
    console.log("(No more blue background means it's closed)");
  });
});

.open .nav-list {
  background-color: lightskyblue;
}

<body class="open">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#showcase" class="nav-link">Home</a></li>
    <li class="nav-item">
      <a href="#robots" class="nav-link">Robots</a></li>
    <li class="nav-item">
      <a href="#projects" class="nav-link">Projects</a></li>
  </ul>
</body>

注意：我认为最好在整个菜单上添加一个单击侦听器（并在继续之前检查任何单击事件的目标是否为 nav-link）。但由于您想了解如何一次添加多个侦听器，所以我坚持这样做。

单击导航 link 时关闭导航菜单覆盖。只有第一个导航 link 有效

Close nav menu overlay when clicking nav link. Only the first nav link works

html

javascript

css

nav