jquery選擇器幫助。一切，但與指定選擇

我有以下函數打開疊加菜單：jquery選擇器幫助。一切，但與指定選擇

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

隱藏菜單，我想用戶能夠在任何區域外單擊」 .context，開關 - 菜單」

我，試圖：不是（），但沒有成功..

來源

2011-12-09 Rdpi

試試這個，我們不希望調用一個函數，當你點擊的元素本身，而不是當我們點擊內元素。這就是爲什麼我們需要2次檢查。

您想使用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/

來源

2011-12-09 15:55:13 Niels

的原因，這是很困難的，因爲事件的冒泡。

你可以嘗試這樣的事情：

$('.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也會觸發你不想要的身體事件處理程序，因爲它會取消一半時間點擊.context-switch點擊的效果。（即，如果狀態被隱藏，然後單擊顯示，該事件將泡沫和引發body處理程序，然後將再次隱藏.context-switch-menu。）

來源

2011-12-09 15:55:21 Yahel

這裏面的ContextMenu發生的元素的情況下，之前關閉的ContextMenu。 – Niels

我想你會希望在'.context-switch-menu'上設置'stopPropagation'。或者另外呢？ –

哎呀，好電話。固定。 – Yahel

未經測試，會是這樣的工作？：


$('.context-switch').click(function() { 
     $(".context-switch-menu").show(); 
    }); 
$(document).click(function() { 
     $(".context-switch-menu").hide(); 
    });

而不是使用document,'html'或'body'也可以工作。

來源

2011-12-09 15:55:22

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

來源

2011-12-09 15:56:09 PeeHaa

是的，事件冒泡讓你在頂部捕捉事件，假設頁面上的其他元素都不會冒泡。 –

$(document).on('click', function(e) { 
    if (e.target.className !='context-switch-menu') { 
     $(".context-switch-menu").hide(); 
    } 
});

來源

2011-12-09 15:58:17 adeneo

這裏只是一個想法，基於什麼別人對自己過去曾建議：

$(document).click(function(e){ 
    //this should give you the clicked element's id attribute 
    var elem = $(e.target).attr('classname'); 
    if(elem !== 'context-switch-menu'){ 
     $('.context-switch-menu').slideUp('slow'); 
     //or however you want to hide it 
    } 
});

來源

2011-12-09 15:59:31

jquery選擇器幫助。一切，但與指定選擇

回答

相關問題