0

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

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

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

Подскажите пожалуйста, как это можно реализовать?

$('.menu-toggle').click(function() {
  $('.menu-mobile').toggleClass('menu-mobile_active');
});

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  var div = $(".menu-mobile"); // тут указываем class элемента
  var toggle = $('.menu-toggle');
  if (!div.is(e.target) // если клик был не по нашему блоку
    &&
    !toggle.is(e.target) // и не по кнопке
    &&
    div.has(e.target).length === 0) { // и не по его дочерним элементам
    $(".menu-mobile").removeClass('menu-mobile_active');
    alert('Мобильное меню скрыто');
  }
});
.menu-mobile {
  width: 200px;
  height: 200px;
  background-color: #bbb;
  opacity: .3;
}

.menu-mobile_active {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu-mobile">Мобильное меню</div>
<button class="menu-toggle">Клик</button>

1
  • Кто мешает вместо .toggleClass() использовать .addClass(className) и .removeClass(className)? По условию проверяйте наличие нужного класса и выполняйте что необходимо.
    – Alex
    4 июн 2020 в 11:54

1 ответ 1

0

Добавьте проверку на класс

$('.menu-toggle').click(function() {
  $('.menu-mobile').toggleClass('menu-mobile_active');
});

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  const div = $(".menu-mobile"); // тут указываем class элемента
  const toggle = $('.menu-toggle');
  if(!toggle.hasClass('menu-mobile_active')) return // проверить, есть ли класс
  if (!div.is(e.target) // если клик был не по нашему блоку
    &&
    !toggle.is(e.target) // и не по кнопке
    &&
    div.has(e.target).length === 0) { // и не по его дочерним элементам
    $(".menu-mobile").removeClass('menu-mobile_active');
    alert('Мобильное меню скрыто');
  }
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.