Как запускать событие только во время открытия меню?

Question

[Мухаммад Магомедов]

Добрый день.

У меня следующая задача.
Есть блок "Мобильное меню" и есть кнопка "Клик".

При нажатии на кнопку, у мобильному меню переключается класс menu-mobile_active
А при нажатии на область, помимо самого мобильного меню, у мобильного меню удаляется классmenu-mobile_active и всплывает alert с текстом, "мобильное меню скрыто".

Нужно сделать так, чтобы скрипт:

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  ....
});

запускался только при открытом меню, т.е. только тогда, когда у мобильного меню есть класс menu-mobile_active
Подскажите пожалуйста, как это можно реализовать?

Answer 1

[FinGanapre]

https://developer.mozilla.org/en-US/docs/Web/API/M...

Небольшой пример:

<div class="class1 class2">some elem</div>
<button class="btn">toggle</button>

window.onload = e => {
  // получаем элементы
  const $div = document.querySelector('.class1')
  const $btn = document.querySelector('.btn')
  
  // функция, переключающая класс ( нужна для демонстрации )
  const toggle = e => $div.classList.toggle('class2')
  
  // функция, которая будет выполняться при изменении атрибутов у $div
  const obsCallback = ( ml, ob ) => {
    // за место вывода в консоль после проверки на существование класса подставляем нужные функции
    ml[0].target.classList.contains('class2') ? console.log(true) : console.log(false)
  }
  
  // создание обсервера и передача нашей функции
  const observer = new MutationObserver(obsCallback)
  
  // опции (за чем будем следить)
  const observerOptions = {
    childList: false,
    attributes: true,
    subtree: false
  }
  
  // начинаем наблюдать
  observer.observe($div, observerOptions)
  
  // просто повесил событие на кнопку чтобы менять класс у $div
  $btn.addEventListener('click', toggle)
}

Comments

[Мухаммад Магомедов]

Неа. Этот вариант к сожалению не прокатит... Нужно при открытии мобильного меню вешать обработчик, при закрытии снимать его. Но у меня так не получается..

[FinGanapre]

Мухаммад Магомедов, у вас добавляется класс когда меню открыто и удаляется класс, когда меню закрыто. Обсервер срабатывает каждый раз, когда изменяются какие-либо атрибуты. Т.е. внутри callback-а с обсервера вы можете реализовывать любую логику. Я в примере проверил есть этот класс или нет.

Answer 2

[Stalker_RED]

if (document.querySelector('.menu-mobile.menu-mobile_active')) {
  ...
}

Comments

[Мухаммад Магомедов]

Это нужно прописывать внутри скрипта?:

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  ....
});

Мне нужно сам скрипт поставить под условие

[Stalker_RED]

Мухаммад Магомедов, да, при клике проверять есть ли класс.

[Мухаммад Магомедов]

Stalker_RED, Нельзя сам скрипт

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  ....
});

запускать при закрытом меню. Хоть если добавить условие внутри скрипта, сам же скрипт будет выполняться?)

[Stalker_RED]

Мухаммад Магомедов, вероятно вы не до конца понимаете что такое "обработчик событий".
вот этот $().mouseup ждет когда произойтет отпускание клика. Запускается, скорее всего, при загрузке страницы.

Если вы добавите проверку класса не внутри, а снаружи, то он вообще не запустится.

[Мухаммад Магомедов]

Stalker_RED, Я все понимаю)
Думал вдруг есть какой-нибудь выход. Сделали так код

[Stalker_RED]

Мухаммад Магомедов, меньше кода, проще