javascript - 响应式菜单点击不关闭

Question

我有一个带有一些 Javascript 的小汉堡菜单。它运行良好，但我希望在您按下链接(主页、关于、工作、元素)时关闭菜单，因为它用于单页机。

有人可以帮帮我吗？

<nav>
  <div class="logo">
    <h4>The Logo</h4>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Projects</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>

Codepen

Answer 1

您可以使用以下内容作为入门。本质上，您将点击处理程序添加到 navlink a 标记，并通过查找适当的 nav-active 类来检查导航当前是否已退出。如果找到，则通过删除您为展开菜单而添加的相关类来反转动画。

  const links = document.querySelectorAll(".nav-links li a");
  links.forEach(link => {
    link.addEventListener(`click`, () => {
      if(nav.classList.contains('nav-active')) {
        nav.classList.remove(`nav-active`);
        burger.classList.remove(`toggle`);
        navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = ``;
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
              0.3}s`;
          }
        });
      }
    });
  });

来自您的代码笔的完整 JS:

const navSlide = () => {
  const burger = document.querySelector(`.burger`);
  const nav = document.querySelector(`.nav-links`);
  const navLinks = document.querySelectorAll(".nav-links li");

  const links = document.querySelectorAll(".nav-links li a");
  links.forEach(link => {
    link.addEventListener(`click`, () => {
      if(nav.classList.contains('nav-active')) {
        nav.classList.remove(`nav-active`);
        burger.classList.remove(`toggle`);
        navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = ``;
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
              0.3}s`;
          }
        });
      }
    });
  });

  // Nav animation
  burger.addEventListener(`click`, () => {
    nav.classList.toggle(`nav-active`);

    // Links animation
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ``;
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
          0.3}s`;
      }
    });

    // Burger animation
    burger.classList.toggle(`toggle`);
  });
};

navSlide();