當我點擊相同的菜單項（錨鏈接）時，漢堡菜單不會關閉

Question

我有一個漢堡菜單（導航）。 每個鏈接都跳轉到同一網站上的某個位置（錨鏈接）。 滾動事件后菜單關閉（所以基本上當我點擊觸發滾動（跳轉）到錨點的鏈接時）

這是我用來觸發菜單關閉的腳本。

<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>

這就是我的 CSS 文件中的內容。 菜單鏈接是錨鏈接（#contact）

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

在我跳轉到錨點並嘗試從菜單中單擊相同的錨點鏈接之后，菜單不會關閉（因為不會有滾動事件）。

是否有另一種方法可以在不使用滾動事件的情況下關閉漢堡菜單？

Answer 1

不確定它是否是您要查找的內容，但您可以在單擊具有特定類的a元素（將類添加到所有錨點）時觸發hideMenu()函數。 我建議使用document.querySelectorAll('.className')創建一個可以用for或forEach()迭代的數組作為一個例子：（我正在向名為.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)

})