JQuery: запуск близко мобильного меню нав

Question

Я чрезвычайно основную функцию щелчка JQuery, которая переключает отображение мобильной навигационной menu-- гамбургера стиле, срабатывающие СМИ query--, что выглядит следующим образом:

// mobile menu click function 
$(".mobile-nav-toggle").click(function() { 
    $(".mobile-nav-menu").slideToggle(); 
}); 

Таким образом, нажатие на .mobile-nav-toggle div вызывает появление .mobile-nav-menu, которое расположено под основной панелью заголовка. Мой вопрос: есть ли простой способ через jQuery запускать закрытие/скрытие меню, нажав/нажав где-нибудь за пределами самого меню? В его нынешнем виде можно только закрыть меню, щелкнув/нажав кнопку переключения.

Спасибо за понимание.

Answer 1

Вы можете иметь обработчик щелчка добавляется в самом документе, как

// mobile menu click function 
 
$(".mobile-nav-toggle").click(function() { 
 
    $(".mobile-nav-menu").slideToggle(); 
 
}); 
 
$(document).click(function(e) { 
 
    //if the click has happend inside the mobile-nav-menu or mobile-nav-toggle then ignore it 
 
    if (!$(e.target).closest('.mobile-nav-menu, .mobile-nav-toggle').length) { 
 
    $(".mobile-nav-menu").slideUp(); 
 
    } 
 
})

body { 
 
    min-height: 100px; 
 
    background-color: lightgrey; 
 
} 
 
.mobile-nav-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="mobile-nav-toggle">Toggle</button> 
 
<div class="mobile-nav-menu">menu 
 
    <div>

Answer 2

Вот рабочий код

$(".mobile-nav-toggle").click(function (event) { 
    event.stopPropagation(); 
    $(".mobile-nav-menu").slideToggle(); 
}); 

$(document).click(function(){ 
    $('.mobile-nav-menu').hide(); 
});