Question

我知道之前已经问过这个问题，但是这个问题有点曲解。

我在这个问题上看到了一些反对意见。请让我知道您拒绝投票的理由，以便将来我可以纠正。感谢您的输入。

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

我希望每个链接都可以在单击时关闭导航菜单。

那么，如何获得所有的导航链接以在单击时关闭导航菜单？我有一种预感，它与使用querySelectorAll而不是仅querySelector有关。

以下是该网站的链接：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类的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>

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

单击导航链接时，关闭导航菜单覆盖。仅第一个导航链接有效

1 个答案: