Question

我有以下jQuery：

$('#account-menu').hide();

$("#account-link").click(function(e) {
     e.preventDefault();
     $("#account-menu").toggle();
     $("#account-link").toggleClass("selected");
});

我想要做的是检查用户是否点击屏幕上的其他任何位置 WHILST ACCOUNT MENU 但不在帐户菜单本身内，如果是，则隐藏菜单。有人可以帮忙吗？

由于

编辑：我自己就是这样做的：

$('#account-menu').hide();

    $("#account-link").click(function(e) {
        e.preventDefault();
        $("#account-menu").toggle('fast');
        $("#account-link").toggleClass("selected");
    });

    $(document).mouseup(function(e) {
        var $targ = $(e.target);

        // if we are the link or the box, exit early
        if ($targ.is('#account-link') || $targ.is('#account-menu')) return;
        // if we have a parent who is either, also exit early
        if ($targ.closest('#account-link, #account-menu').length) return;

        // hide the box, unselect the link
        $("#account-link").removeClass("selected");
        $("#account-menu").hide('fast');
    });

但是想看看是否有一种更好，更小（代码方式）的方式。

Answer 1

也许是这样的......

$('#account-menu').hide();

$('body').click(function(){
    $("#account-menu:visible').toggle();
    $("#account-link").removeClass("selected");
});

$("#account-link").click(function(e) {
    e.preventDefault();
    $("#account-menu:not:visible").toggle();
    $("#account-link").addClass("selected");
});

<强>更新

所以这不会完全奏效，因为当您单击链接时也会触发正文单击。这是朝着正确方向迈出的一步。克/升

更新＃2

我终于使用Joseph Le Brech（+1）的评论在JSFiddle.net上完成了这项工作。 Check out the live Demo。我无法让$('body')选择器在那里工作，所以我用一个名为bodyDiv的div来模拟身体。它全部评论并100％工作。快乐的编码。

Answer 2

Use jQuery to hide a DIV when the user clicks outside of it

jQuery在mouseup上切换

2 个答案: