Форум

Tipylja · #1 (**permalink**) 14.10.2018, 20:36

Здравствуйте. У меня есть меню с такой структурой:

<nav class="middleMenu layout__middleMenu">
    <a href="#" class="middleMenu__control">Каталог товаров</a>
    <ul class="middleMenu__block middleMenu__block--hidden">
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Двери</a>                
        </li>
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Карнизы</a>                
        </li>
    </ul>
</nav>

Меню выпадает при клике по "middleMenu__control", при клике у ul с классом middleMenu__block, удаляем класс middleMenu__block--hidden, тем самым в css уберется правило display: hidden, при повторном клике, меню "сворачивается", то есть возвращаем класс middleMenu__block--hidden.
Вот js который я для этого написал:

window.addEventListener('load', function (e) {
    let control = document.querySelector('.middleMenu__control');
    let menuBlock = document.querySelector('.middleMenu__block');
    
    control.addEventListener('click', function (e) {
        e.preventDefault();

        if(menuBlock.classList.contains("middleMenu__block--hidden")){
            menuBlock.classList.remove("middleMenu__block--hidden")

        }else {
            menuBlock.classList.add("middleMenu__block--hidden");

        }
    })

});

Но, в таком случае меню сворачивается только если кликнуть по middleMenu__control . Но по смыслу, оно должно "сворачиваться" и если кликнуть просто вне самого меню. Я добавляю вот такой код

document.addEventListener('click', function(e){
        if(control !== e.target){
            menuBlock.classList.add("middleMenu__block--hidden");
        }
    }, true);

То есть, если клик происходит не на элементе control то меню "закрывается" и это работает. Но я думаю, что возможно это можно сделать как-то элегантнее что ли, то есть не знаю на сколько целесообразно для такой задачи отслеживать клик на document. И второй момент - по сути я отслеживаю, что клик произошел не на control и тогда меню "сворачиваю", но посути при клике на control его тоже нужно свернуть(так и работает), какой-то код противоречивый получается. Не знаю, мало опыта, возможно это и нормально, все писал сам, может так и нужно делать. Подскажите пожалуйста

j0hnik · #2 (**permalink**) 14.10.2018, 20:42

Tipylja,
можно один обработчик на document повесить и им отслеживать клик по меню и клик мимо меню

рони · #3 (**permalink**) 14.10.2018, 21:40

Tipylja,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .middleMenu__block--hidden{
         display: none;
     }

  </style>

  <script>
window.addEventListener("load", function(e) {
    var control = document.querySelector(".middleMenu__control");
    var menuBlock = document.querySelector(".middleMenu__block");
    document.addEventListener("click", function(e) {
        if (control === e.target) {
            e.preventDefault();
            menuBlock.classList.toggle("middleMenu__block--hidden")
        } else if (e.target.closest(".middleMenu__block") || menuBlock.classList.contains("middleMenu__block--hidden")) return;
        else menuBlock.classList.add("middleMenu__block--hidden")
    }, true)
});
  </script>
</head>

<body>
<nav class="middleMenu layout__middleMenu">
    <a href="#" class="middleMenu__control">Каталог товаров</a>
    <ul class="middleMenu__block middleMenu__block--hidden">
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Двери</a>
        </li>
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Карнизы</a>
        </li>
    </ul>
</nav>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript