当我点击相同的菜单项（锚链接）时，汉堡菜单不会关闭

Question

I have a hamburger menu (navigation). Every link jumps to a place on the same web site (anchor links). The menu closes after a scroll event (so basically when I click on a link that triggers a scroll (jump) to the anchor)

This is the script I use to trigger the closing of the menu.

<script type="text/javascript">
function hideMenu(){
  let menuOpen = document.querySelector('.menu-trigger').checked;

  if(menuOpen = true){
    document.querySelector('.menu-trigger').checked = false;
  }
  }
  window.addEventListener("scroll", hideMenu);
    </script>

This is what I have in my CSS file. The Menu links are anchor links (#contact)

https://codepen.io/takaneichinose/pen/aNrBKp

After I jumped to the anchor and I try to click the same anchor link from the menu then the menu won't close (since there will be no scrolling event).

Is there another method to close the hamburger menu without using a scrolling event?

Answer 1

Not sure if it is what you're looking for, but you could just trigger the hideMenu() function when the a elements with an specific class (Add a class to all the anchors) are clicked. I would suggest using document.querySelectorAll('.className') to create an array that can be iterated with for or forEach() As an example: (I'm adding a class to the anchors named .nav-anchor )

const navAnchors = document.querySelectorAll('.nav-anchor')
navAnchors.forEach(anchor =>{
  function handleMenu(){
    let menuOpen = document.querySelector('.menu-trigger').checked;

    if(menuOpen = true){
      document.querySelector('.menu-trigger').checked = false;
    }

  }
  anchor.addEventListener("click", handleMenu)

})