当我单击菜单外时，如何隐藏jQuery toggle()

Question

我找到了有关此问题的几个主题，但不幸的是，没有一个为我解决。我正在使用这样的jQuery方法：

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

基本上，当我单击MENUdiv时，菜单会滚下来，当我再次单击它时，菜单被滚动=隐藏。问题是，当菜单被滚动并单击Menu Div外时，菜单保留 - 我想隐藏它。

我通过了一些教程，但是我没有找到解决此问题的解决方案。

关于这个问题的每一项帮助，我都会为此感到高兴。

谢谢！

Answer 1

您可以进行单击事件，在内部检查是否在menu_user Div内进行单击。如果不是，那么您可以隐藏下拉。

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

Answer 2

您可以使用

$(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

记住上面的代码每次用户单击页面时都会触发。