Web_Mukhammad
@Web_Mukhammad
frontend-разработчик

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

Добрый день.

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

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

Нужно сделать так, чтобы скрипт:
// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  ....
});
запускался только при открытом меню, т.е. только тогда, когда у мобильного меню есть класс menu-mobile_active
Подскажите пожалуйста, как это можно реализовать?

  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ответы на вопрос 2
FinGanapre
@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)
}
Ответ написан
Stalker_RED
@Stalker_RED
if (document.querySelector('.menu-mobile.menu-mobile_active')) {
  ...
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы