如何折叠响应式导航栏

Question

因此，当用户单击我网站导航栏中的 link 时，我无法折叠 Android 上的导航菜单。我尝试使用 addEventListener 但这不起作用。所以换句话说，我的意思是我想在滚动或单击导航 link 时 collapse/close。我不想使用任何图书馆这是代码

const hamburger = document.querySelector('.nav-menu');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelector('.nav-links li');
hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('activate');
  links.forEach(link => {
  })
})
//Here is the scroll one
//This part is not working 
hamburger.addEventListener('scroll', 'click', () => {
  navLinks.classList.remove('activate');
})

这是我的响应式导航菜单 css 代码

@media screen and (max-width: 768px) {
  .nav-line {
    height: 3px;
    width: 30px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }
  .nav-menu {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }
  .nav-links {
  position: fixed;
  background: var(--gray);
  height: 100vh;
  width: 100%;
  flex-direction: column;
  z-index: 1;
  clip-path: circle(100px at 90% -10%);
  -webkit-clip-path: circle(100px at 90% -10%);
  transition: all 1s ease-out;
  pointer-events: none;
  /*display: none;*/
}
.nav-links.activate{
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
  pointer-events: all;
}
.nav-menu {
  flex-direction: column;
}
.nav-links:hover {
  color: red;
}
}

这是我的html部分

  <div class="nav-menu">
    <div class="nav-line"></div>
<div class="nav-line"></div>
<div class="nav-line"></div>
  </div>

  <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About Me</a></li>
    <li><a href="#">Tools</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</nav>

当点击汉堡包按钮时，导航栏会完美关闭，就像点击它时打开一样。可以使用相同的动画，例如在单击导航 links 或滚动时关闭导航栏吗？这是网站 link:https://ishankbg.tech 如果我需要添加更多细节，我会如果你觉得这个问题不好或者遗漏了什么可以投反对票

Answer 1

将滚动的事件侦听器单独设置为文档对象，因为当用户滚动时鼠标可能不在菜单上。

如： document.addEventListener('scroll', #function 删除类列表#)

如何折叠响应式导航栏

How to collapse a responsive navigation bar

html

javascript

css

responsive-design