Question

我已经找到了关于这个问题的几个主题，但遗憾的是没有一个主题适合我。我正在使用这样的jQuery方法：

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

基本上，当我点击MENU div时，菜单会滚动下来，当我再次点击它时，菜单会被卷起=隐藏。问题是当菜单滚动下来并点击Menu div之外时，菜单会一直显示 - 我想隐藏它。

我参加了一些教程，但是我找不到可以解决这个问题的解决方案。

我很乐意为这个问题提供一切帮助。

谢谢！

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

您可以执行点击事件，并在其中检查点击是否在menu_user div内。如果没有，那么你可以隐藏下拉列表。

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

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

2 个答案: