汉堡菜单切换点击关闭

Question

我正试图找到解决下一个问题的方法，我希望当有人点击它打开的汉堡菜单，然后当他们在菜单中选择某些内容并移动到页面中的那个点时（这是一个登陆页面）它会自动关闭。目前它打开并且工作正常，只是在事件发生后它没有关闭。谢谢！这是我的代码：

HTML：

const btnHamburger = document.querySelector('#btnHamburger');
const body = document.querySelector('body');
const header = document.querySelector('.header');
const overlay = document.querySelector('.overlay');
const fadeElems = document.querySelectorAll('.has-fade');

btnHamburger.addEventListener('click', function(){
  console.log('click hamburger');

  if(header.classList.contains('open')){
    body.classList.remove('noscroll');
    header.classList.remove('open');    
    fadeElems.forEach(function(element){
      element.classList.remove('fade-in');
      element.classList.add('fade-out');
    });
    
  }
  else { // Open Hamburger Menu
    body.classList.add('noscroll');
    header.classList.add('open');
    fadeElems.forEach(function(element){
      element.classList.remove('fade-out');
      element.classList.add('fade-in');
    });

  }  
});

.header {
  position: relative;
  z-index: 1;
}

.header.open .header__toggle > span:first-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.header.open .header__toggle > span:nth-child(2) {
  opacity: 0;
}

.header.open .header__toggle > span:last-child {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.header .overlay {
  opacity: 0;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d314d), to(transparent));
  background-image: linear-gradient(#2d314d, transparent);
}

.header nav {
  position: relative;
  background-color: white;
  padding-top: 1.0625rem;
  padding-bottom: 1.0625rem;
}

.header__logo img {
  width: 12.9125rem;
  height: 4.575rem;
}

.header__toggle > span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: #2d314d;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transform-origin: 3px 1px;
          transform-origin: 3px 1px;
}

.header__toggle > span:not(:last-child) {
  margin-bottom: 5px;
}

.header__menu {
  position: absolute;
  width: calc(100% - 3rem);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: white;
  margin-top: 1.5rem;
  padding: 1.625rem;
  border-radius: 5px;
}

.header__menu a {
  display: block;
  padding: 0.625rem;
  color: #2d314d;
  text-align: center;
}

.header__links a {
  position: relative;
  font-size: 0.875rem;
  color: #9698a6;
  -webkit-transition: color 300ms ease-in-out;
  transition: color 300ms ease-in-out;
}

.header__links a:not(:last-child) {
  margin-right: 32px;
}

.header__links a::before {
  content: "";
  display: block;
  position: absolute;
  height: 5px;
  left: 0;
  right: 0;
  bottom: -30px;
  background: -webkit-gradient(linear, left top, right top, from(#265fd9), to(#64d9f7));
  background: linear-gradient(to right, #265fd9, #64d9f7);
  opacity: 0;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}

.header__links a:hover {
  color: #2d314d;
}

.header__links a:hover::before {
  opacity: 1;
}

<body>
  <a name="header" id="header"></a> 
  <header class="header">
    <div class="has-fade"></div>

    <nav class="container container--pall flex flex-jc-sb flex-ai-c">
      <a href="/" class="header__logo">
        <img src="./images/img.png" alt="A" />
      </a>

      <a id="btnHamburger" href="#" class="header__toggle hide-for-desktop">
        <span></span>
        <span></span>
        <span></span>
      </a>

      <div class="header__links hide-for-mobile">
        <a href="#text">Text</a><a href="#text">Text</a><a href="#text">Text</a
        ><a href="#">text</a><a href="text">Text</a>
      </div>

      <a href="/" class="button header__cta hide-for-mobile"
        >Email</a>
        <a href="/" class="button header__cta hide-for-mobile"
        >011</a>
    </nav>

    <div class="header__menu has-fade">
      <a href="/">index 1</a>
      <a href="#feature">index 2</a>
      <a href="#articles">index 3</a>
      <a href="">index 4</a>
      <a href="">index 5</a>
    </div>

Answer 1

你可以试试这个， 通过它的类选择包含项目列表的容器并添加事件侦听器，这样当你点击菜单时我们就会这样做

1. 隐藏菜单
2. 隐藏覆盖背景
3. 并将汉堡菜单改回原来的 3 行
4. 并且不从正文中删除任何滚动

这是代码

const container = document.querySelector(".header__menu");

// then add event listener 
container.addEventListener("click", () => {
  header.classList.remove("open");
  overlay.classList.remove("fade-in");
  container.classList.add("fade-out");
  body.classList.remove("noscroll");
});