单击 link 时如何使我的汉堡菜单消失

Question

我创建了一个包含以下 JS 的汉堡菜单：

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

  burger.addEventListener('click', () => {
    // Open Menu
    burger.classList.toggle('no-shadow');
    nav.classList.toggle('nav-active');
    // Links fade efffect
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade .5s ease forwards ${index / 5 + .2}s`;
      }
      //ADDED
      link.addEventListener('click', () => {
        burger.classList.toggle('no-shadow');
        nav.classList.toggle('nav-active');
        burger.classList.toggle('toggle');
      });
      //ADDED
    });
    // Burger animation
    burger.classList.toggle('toggle');
  });
}
navSlide();

.nav-links {
    position: fixed;
    padding-top: 8rem;
    right: 0px;
    height: 70vh;
    top: 0;
    background-color: var(--branding);
    border-bottom-left-radius: 3rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 3em;
    transform: translateX(100%);
    transition: transform .2s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .nav-links li a {
    font-size: 1rem ;
  }

.hamburger {
  margin: 1.5em;
  display: block;
  cursor: pointer;
  background-color: var(--branding);
  padding: 16px 12px;
  position: fixed;
  top: 0;
  right: 0;
  border-radius: 100%;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
}

.hamburger div {
  width: 25px;
  height: 2px;
  background-color: #d1d1d1;
  margin: 5px;
  transition: all .3s ease;
}

.nav-active {
  transform: translateX(0%);
}

.no-shadow {
  box-shadow: none;
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-405deg) translate(-5px, 5px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(405deg) translate(-5px, -5px);
}

<ul class="nav-links">
  <li><a href="#abt">About</a></li>
  <li><a href="#srv">Services</a></li>
  <li><a href="#soc">Social</a></li>
  <li><a href="#inf">Contact</a></li>
</ul>

  

<div class="hamburger">
   <div class="line1"></div>
   <div class="line2"></div>
   <div class="line3"></div>
</div>

以下是我发现的与上传相关并与我的问题相关的内容，它几乎可以按我希望的方式工作，但是，正如我所说，它不会在菜单第一次关闭后显示链接。我按照 Mark 的要求添加了汉堡样式。

如果您还需要什么，请告诉我。

Answer 1

我将链接的点击事件监听器移到了汉堡点击事件监听器之外，以避免重复的事件绑定。我还更改了链接的事件侦听器，以编程方式触发汉堡包点击以再次隐藏它。

这样你就没有重复的代码了。您想避免在更改某些内容时必须更改 2 个或更多地方的代码。

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

  //Toggle burger
  burger.addEventListener('click', () => {
    burger.classList.toggle('no-shadow');
    nav.classList.toggle('nav-active');
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade .5s ease forwards ${index / 5 + .2}s`;
      }
    });
    burger.classList.toggle('toggle');
  });
  
  //Moved outside the burger event listner to avoid duplicate event bindings and let the event listener programmatically trigger the burger click to hide it again.
  navLinks.forEach((link, index) => {
    link.addEventListener('click', () => {
      burger.click();
    });
  });
}
navSlide();

.nav-links {
  position: fixed;
  padding-top: 8rem;
  right: 0px;
  height: 70vh;
  top: 0;
  background-color: var(--branding);
  border-bottom-left-radius: 3rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 3em;
  transform: translateX(100%);
  transition: transform .2s ease-in;
}

.nav-links li {
  opacity: 0;
}

.nav-links li a {
  font-size: 1rem;
}

.hamburger {
  margin: 1.5em;
  display: block;
  cursor: pointer;
  background-color: var(--branding);
  padding: 16px 12px;
  position: fixed;
  top: 0;
  right: 0;
  border-radius: 100%;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4);
}

.hamburger div {
  width: 25px;
  height: 2px;
  background-color: #d1d1d1;
  margin: 5px;
  transition: all .3s ease;
}

.nav-active {
  transform: translateX(0%);
}

.no-shadow {
  box-shadow: none;
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-405deg) translate(-5px, 5px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(405deg) translate(-5px, -5px);
}

<ul class="nav-links">
  <li><a href="#abt">About</a></li>
  <li><a href="#srv">Services</a></li>
  <li><a href="#soc">Social</a></li>
  <li><a href="#inf">Contact</a></li>
</ul>



<div class="hamburger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

单击 link 时如何使我的汉堡菜单消失

How to make my burger menu dissapear when clicking on link

javascript

hamburger-menu