jQuery在多個div /元素外部單擊

Question

有兩個部分targetDiv1和targetDiv2 （未嵌套）。 和另一部分collapsibleDiv 。 我需要在元素targetDiv2外部單擊時運行一個函數（折疊div）； 但是單擊targetDiv1時不應觸發該功能。 使用下面的代碼，我將無法實現此目標。任何幫助都將非常棒...

$(document).click(function(e) { 
    if(!$(e.target).closest('.targetDiv1').length && !$(e.target).is('.targetDiv1')) {
        $('.collapsibleDiv').slideDown();
    }
});

JSFiddle根據@Kweiss https://jsfiddle.net/vn8gmu8g/的答案

Answer 1

您希望函數在Div1或Div2之外的單擊上執行，但是您的代碼僅排除Div1。 只需添加Div2。

$(document).click(function(e) { 
    var $target = $(e.target);
    if(!$target.closest('.targetDiv1').length && !$target.hasClass('targetDiv1') && 
       !$target.closest('.targetDiv2').length && !$target.hasClass('targetDiv2')) {
        $('.collapsibleDiv').slideDown();
    }
});

將e.target保存在變量中並使用hasClass()將使您的代碼更快。

Answer 2

  $(".targetDiv2").click(function(){
           $('.collapsibleDiv').slideDown();
  })

它可以滿足您的需求。 單擊div2它將折疊。

Answer 3

試試這個：如果div2的條件必須添加相同

$(document).click(function(e) {
    var $clickedElement = $(e.target); 
    if(!$clickedElement.closest('.targetDiv1').length && !$clickedElement.is('.targetDiv1') && !$clickedElement.closest('.targetDiv2').length && !$clickedElement.is('.targetDiv2')) {
        $('.collapsibleDiv').slideDown();
    }
});

Answer 4

我創建了一個演示 ，我會說它正在工作...

$(document).click(function(e) { 
    if(!$(e.target).closest('.targetDiv1').length && !$(e.target).is('.targetDiv1')) {
        $('.collapsibleDiv').slideDown();
        alert("OK");
    }
});

如果單擊targetDiv1->沒有任何反應

如果您單擊targetDiv2->警報

如果您單擊其他任何位置->警報

我會說，這就是你所描述的。

Answer 5

下面應該工作

$(document).click(function(e) { var target = $(e.target); if(!target.hasClass('.targetDiv1') && !target.hasClass('.targetDiv2')) { // perform you operation } });