У меня следующая задача. Есть блок "Мобильное меню" и есть кнопка "Клик".
При нажатии на кнопку, у мобильному меню переключается класс 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>
.toggleClass()
использовать.addClass(className)
и.removeClass(className)
? По условию проверяйте наличие нужного класса и выполняйте что необходимо.