菜单在第二次单击时不会隐藏

Question

我面临汉堡菜单的问题。。。当我点击汉堡图标时没有问题，它打开和关闭都没有任何问题，当我点击链接时，我会很好地重定向到各个部分，菜单关闭，到目前为止没有问题。

但是，当我重新打开菜单并再次单击链接部分时，我的菜单不再想关闭，我也不明白为什么，因为我设置了一个条件，它一定在某个地方有问题。。所以请你帮我理解。非常感谢。这是我的代码：

html:

<header id="home" class="background-color">
<div id="logo">
<a href="index.php#home"><img src="./img/logo.svg" alt="logo"></a>
</div>
<nav id="menu-dekstop">
<a href="index.php#home">Accueil</a>
<a href="index.php#projects">Projets</a>
<a href="index.php#contact">Contact</a>
</nav>
<div class="show-menu">
<div id="logo">
<a href="index.php#home"><img src="./img/logo.svg" alt="logo"></a>
</div>
</div>
<div id="menu-wrap">
<nav class="menu">
<a href="index.php#home">Accueil</a>
<a href="index.php#projects">Projets</a>
<a href="index.php#contact">Contact</a>
</nav>
</div>
<div id ="menu-holder" class="menu-holder">
<button id="open-menu" class="white">
<div class="burger">
<span></span>
</div>
</button>
</div>
</header>

JavaScript

burger.addEventListener('click', menuOpen)
function menuOpen()
{
if (showMenu.style.display == 'block')
{
burger.classList.toggle('active');
menuWrap.style.display = 'none';
showMenu.style.display = 'none';
}
else 
{
burger.classList.toggle('active');
menuWrap.style.display = 'block';
showMenu.style.display = 'block';
}
}

Answer 1

似乎没有侦听器在单击链接时关闭菜单。

此代码将在标题中点击链接时完成菜单隐藏：

const header = document.getElementById('home');
header.addEventListener('click', function (evt) {
const clickTarget = evt.target;
if (clickTarget.tagName !== 'A") { return; }
burger.classList.remove('active);
menuWrap.style.display = 'none';
showMenu.style.display = 'none';
});

为什么第一次点击链接时菜单就被隐藏了？不确定，但我怀疑这是因为第一次点击链接导致页面重新加载。