Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2018, 20:36
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 72

Закрытие меню при клике "Вне"
Здравствуйте. У меня есть меню с такой структурой:
<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 его тоже нужно свернуть(так и работает), какой-то код противоречивый получается. Не знаю, мало опыта, возможно это и нормально, все писал сам, может так и нужно делать. Подскажите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2018, 20:42
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Tipylja,
можно один обработчик на document повесить и им отслеживать клик по меню и клик мимо меню
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2018, 21:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,116

закрытие по клику вне блока
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>

Последний раз редактировалось рони, 04.02.2019 в 18:49.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие и закрытие меню по клике ruslansh Общие вопросы Javascript 1 05.12.2016 23:16
При на ведении меню мигает и открываються все пункты Dark19 Элементы интерфейса 4 23.12.2014 22:14
Открытие меню при клике Alhambra (X)HTML/CSS 4 25.11.2014 20:07
Задержка в при выборе меню bserg Элементы интерфейса 1 16.12.2013 11:36
При клике на ссылку ничего не происходит gurg0n Элементы интерфейса 2 24.06.2013 11:11