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标签中，并通过查找适当的create view view_name AS select employee, ClockIn,ClockOut, datediff(day,ClockIn,coalesce(ClockOut,getdate())) as duration from table_name类来检查nav当前是否已退出。如果找到了，则通过删除添加的相关类来展开菜单来反转动画。

nav-active

您的Codepen中的完整JS：

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

点击后无法关闭响应式菜单

1 个答案: