2

Есть 2 скрипта.

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

Второй скрипт: при нажатии на любую область, помимо самого мобильное меню, у мобильного меню удаляется класс menu-mobile_active.

Но при нажатии на кнопку "Клик", класс mmenu-mobile_active у мобильного меню не удаляется.

Ссылка на код: https://jsfiddle.net/ygcjhbqf/6/

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

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  var div = $(".menu-mobile"); // тут указываем class элемента
  if (!div.is(e.target) // если клик был не по нашему блоку
    &&
    div.has(e.target).length === 0) { // и не по его дочерним элементам
    $(".menu-mobile").removeClass('menu-mobile_active');
  }
});
.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>https://ru.stackoverflow.com/questions/ask#

Как сделать так, чтобы и при нажатии на кнопку "Клик", у мобильного меню удалялся класс menu-mobile_active?

1
  • Работает же ваш код
    – DaemonHK
    4 июн 2020 в 4:51

1 ответ 1

1

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

// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
console.log('document');
  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');
  }
});
.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>https://ru.stackoverflow.com/questions/ask#

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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