1

Всем привет. Как сделать так, чтобы при клике на произвольную область(любое место кроме кнопки click) меню закрывалось ?

$('#toggle').click(function() {
	$('.sub-menu').slideToggle();
});
.sub-menu {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">click</button>

<div class="sub-menu">
  <ul>
    <li><a href="">point</a></li>
    <li><a href="">point</a></li>
    <li><a href="">point</a></li>
    <li><a href="">point</a></li>
  </ul>
</div>

1

2 ответа 2

1

Если очень грубо:

$('body').on('click', function(event) {
    $('.sub-menu').slideUp();
});
$('#toggle').click(function(event) {
    event.stopPropagation()
    $('.sub-menu').slideToggle();
});
$(".sub-menu").on('click', function(e){
    e.stopPropagation();
});
$('.sub-menu li, .sub-menu li a').click(function(event) { 
    event.stopPropagation();
    $('.sub-menu').slideToggle();
})

Что тут происходит:
1)По клику на body - скрываем меню
2)По клику на меню или элемент меню - прекращаем всплытие
3)По клику на кнопку - прекращаем всплытие и переключаем меню.

5
  • Этот приём работает, но тогда перестаёт работать переход по ссылкам в меню( Commented 4 июн. 2018 в 7:10
  • 1
    @RickHangover Попробуйте добавить: $('.sub-menu li, .sub-menu li a').click(function(event){ event.stopPropagation();}) Commented 4 июн. 2018 в 7:12
  • спасибо, работает, но теперь при клике не ссылку не сворачивается меню) Commented 4 июн. 2018 в 7:23
  • Дописал еще событие на slideToggle $('.sub-menu li, .sub-menu li a').click(function(event){ event.stopPropagation();$('.sub-menu').slideToggle();}) Спасибо огромное всем) Commented 4 июн. 2018 в 7:29
  • 1
    @RickHangover Если мой ответ вам помог - приймите его пожалуйста как правильный, нажав на галочку под стрелками голосований Commented 4 июн. 2018 в 7:34
1

Для этого добавьте див, который будет заполнять всю область документа и задать z-inde меньше чем у меню, и на него вешайте клик.

Ваш ответ

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

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