Блог

Главная - Вопросы по программированию - меню не скрывается при втором нажатии

меню не скрывается при втором нажатии

#javascript #drop-down-menu #hamburger-menu

#javascript #выпадающее меню #гамбургер-меню

Вопрос:

Я столкнулся с проблемой с меню гамбургера… Когда я нажимаю на значок гамбургера, проблем нет, он открывается и закрывается без каких-либо проблем, также, когда я нажимаю на ссылку, я хорошо перенаправляюсь на разделы, и меню закрывается, пока проблем нет.

Но когда я повторно открываю меню и нажимаю второй раз на раздел ссылок, мое меню больше не хочет закрываться, и я не могу понять, почему, потому что я поставил условие, у него должна быть проблема где-то.. Поэтому, пожалуйста, если бы вы могли помочь мне понять. Большое вам спасибо. Вот мой код :

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';
    }
}

Комментарии:

1. Если вы нажмете F12, какие-либо ошибки javascript в вашей консоли инструментов разработчика?

2. Нет, у меня нет никаких ошибок. Но мне интересно, не связано ли это с адресом моих ссылок в URL, который появляется после первого нажатия. После этого, возможно, это что-то переопределяет, но что может быть?

3. Как нажатие на ссылку закрывает меню? Я не вижу здесь кода, который выполняет это.

Ответ №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';
});

Почему меню скрылось при первом нажатии на ссылку? Не уверен, но я подозреваю, что это потому, что первый щелчок по ссылке вызвал перезагрузку страницы.