菜单不会在第二次单击时隐藏
menu doesn't hide on second click
我遇到了汉堡菜单的问题...
当我点击汉堡包图标时没有问题,它打开和关闭没有任何问题,当我点击 link 时,我很好地重定向到这些部分并且菜单关闭,到目前为止没有问题。
但是当我重新打开菜单并再次单击 link 部分时,我的菜单不再想要关闭而且我无法弄清楚为什么因为我已经设置了条件,它一定在某个地方有问题..所以如果你能帮助我理解,请帮助我。非常感谢你。这是我的代码:
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';
}
}
似乎没有侦听器在 link 单击时关闭菜单。
此代码将在 link 单击 header 时实现菜单隐藏:
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';
});
为什么第一次单击 link 时菜单隐藏了?不确定,但我怀疑这是因为第一个 link 点击导致页面重新加载。
我遇到了汉堡菜单的问题... 当我点击汉堡包图标时没有问题,它打开和关闭没有任何问题,当我点击 link 时,我很好地重定向到这些部分并且菜单关闭,到目前为止没有问题。
但是当我重新打开菜单并再次单击 link 部分时,我的菜单不再想要关闭而且我无法弄清楚为什么因为我已经设置了条件,它一定在某个地方有问题..所以如果你能帮助我理解,请帮助我。非常感谢你。这是我的代码:
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';
}
}
似乎没有侦听器在 link 单击时关闭菜单。
此代码将在 link 单击 header 时实现菜单隐藏:
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';
});
为什么第一次单击 link 时菜单隐藏了?不确定,但我怀疑这是因为第一个 link 点击导致页面重新加载。