jquery选择器帮助。除指定选择器之外的所有内容

Question

我有以下功能来打开覆盖菜单：

   $('.context-switch').click(function() {
       $(".context-switch-menu").toggle();
   });

为了隐藏菜单，我希望用户能够点击".context-switch- menu“之外的任何区域。

我正在尝试:not()，但没有成功..

Answer 1

这可能很困难的原因是因为事件冒泡。

您可以尝试如下所示：

$('.context-switch').click(function(e) {
   e.stopPropagation();
   $(".context-switch-menu").toggle();
});

$(".context-switch-menu").click(function(e){
   e.stopPropagation();
});


$("body").click(function(e){
     $(".context-switch-menu").hide();
});

e.stopPropagation()防止click事件冒泡到body处理程序。如果没有它，对.context-switch或.context-switch-menu的任何单击都会触发body事件处理程序，这是您不想要的，因为它会在一半的时间内使.context-switch单击的效果无效。(即，如果状态是隐藏的，然后单击以显示，则事件将冒泡并触发body处理程序，然后再次隐藏.context-switch-menu。)

Answer 2

$('body').click(function(e) {
     if ($(e.target).hasClass('context-switch')) {
         return;
     }

     $(".context-switch-menu").hide();
});

$('.context-switch').click(function() {
    $(".context-switch-menu").toggle();
    return false;
});

Answer 3

试试这个，我们不想在单击元素本身时调用函数，也不想在元素内部单击时调用函数。这就是为什么我们需要两张支票。

您想要使用e.target，它是您单击的元素。

$("html").click(function(e){
    if( !$(e.target).is(".context-switch-menu") && 
        $(e.target).closest(".context-switch-menu").length == 0
    )
    {
       alert("CLICKED OUTSIDE");
    }
});

现场小提琴：http://jsfiddle.net/Xc25K/1/