Убрать меню по клику на произвольную область

156

27 июня 2018, 20:10

Всем привет. Как сделать так, чтобы при клике на произвольную область(любое место кроме кнопки 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>

Answer 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)По клику на кнопку - прекращаем всплытие и переключаем меню.

Answer 2

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