햄버거 메뉴에 문제가 있습니다 ... 햄버거 아이콘을 클릭하면 아무 문제없이 열리고 닫힙니다. 링크를 클릭하면 섹션과 메뉴로 잘 이동합니다. 닫힙니다. 지금까지는 문제 없습니다.
하지만 메뉴를 다시 열고 링크 섹션을 다시 클릭하면 메뉴가 더 이상 닫히고 싶지 않고 조건을 입력했기 때문에 어딘가에 문제가있는 것 같습니다. 이해하도록 도와 주시면 제발. 대단히 감사합니다. 내 코드는 다음과 같습니다.
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>
자바 스크립트
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';
}
}
링크를 클릭하면 메뉴를 닫는 리스너가없는 것 같습니다.
이 코드는 헤더에서 링크를 클릭 할 때 메뉴 숨기기를 수행합니다.
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';
});
링크를 처음 클릭했을 때 메뉴가 숨겨지는 이유는 무엇입니까? 확실하지는 않지만 첫 번째 링크 클릭으로 인해 페이지가 다시로드 되었기 때문이라고 생각합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다