当我在菜单外单击时如何隐藏jQuery toggle（）？

Question

I have found a couple topics regarding to this issue, but none of them unfortunately worked out for me. I am using this jQuery method like this:

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

Basically, when I click on the MENU div, the menu is rolled down, when I click on it again, then the menu is rolled up = hidden. The problem is that when the menu is rolled down and I click outside the Menu div, the menu stays displayed - and I would like to hide it.

I went through some tutorials, but I didn't find a solution that would solve this issue.

I'll be glad for every help regarding to this issue.

Thanks!

Answer 1

You could use

$(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();
    }

});

so that when the menu is rolled down and the user clicked outside .top_menu it will roll up .top_menu

Remember that the above code will fire every time a user clicks on the page.

Answer 2

You can do a click event, and inside it check if the click was inside the menu_user div. If not, then you can hide the dropdown.

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