Как скрыть jQuery toggle(), когда я выхожу за пределы меню?

Question

Я нашел пару тем, относящихся к этой проблеме, но ни один из них, к сожалению, не работал для меня. Я использую этот метод JQuery, как это:

//jQuery 
$('.menu_user').click(function(){ 
    $(".top_menu").toggle(); 
}); 
// HTML 
<div class="menu_user">MENU</div> 
<nav class="top_menu"> 
    ... 
</nav> 

В принципе, когда я нажимаю на MENU DIV, меню катились, когда я нажимаю на него снова, то меню сворачивается = скрыто. Проблема в том, что когда меню катится вниз, и я выхожу за пределы div Menu, меню остается отображаемым - и я хотел бы скрыть его.

Я прошел несколько учебных пособий, но я не нашел решения, которые бы разрешили эту проблему.

Буду рад за каждую помощь в связи с этой проблемой.

Спасибо!

Answer 1

Вы можете использовать

$(document).on("click", function() { 

    if ($('.top_menu:hover').length === 0) { 
     //hide the stuff 
     //roll up menu 
     $(".top_menu").hide(); 
    } else if ($('.menu_user:hover').length === 0) { 
     $(".top_menu").toggle(); 
    } 

}); 

так, что когда меню катились и пользователь нажал вне .top_menu он свернет .top_menu

Помните, что приведенный выше код будет срабатывать каждый раз, пользователь нажимает на страницу.

Answer 2

Вы можете сделать событие щелчка, и внутри него проверьте, был ли щелчок внутри div menu_user. Если нет, вы можете скрыть раскрывающееся меню.

$("body > div").click(function() { 
    if ($(this).attr("class") != "menu_user") { 
     $(".top_menu").hide(); 
    } 
});