jQuery在多个div /元素外部单击

Question

There are two sections targetDiv1 and targetDiv2 (not nested). And another section collapsibleDiv . I need to run a function(be it collapsing the div) on clicking outside the element targetDiv2 ; but the function should not be triggerred when clicking targetDiv1 . With the below code I'm unable to achieve this.. Any help would be great...

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

JSFiddle as per the answer from @Kweiss https://jsfiddle.net/vn8gmu8g/

Answer 1

You want the function to execute on a click outside Div1 or Div2, but your code only excludes Div1. Just add Div2 as well.

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

Saving e.target in a variable and using hasClass() will make your code faster.

Answer 2

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

It does what you want. It will collapse when you click div2 .

Answer 3

Try this : you have to add same if conditions for 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

I created a demo , and I would say, it is working...

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

If you click on targetDiv1 -> nothing happens

If you click on targetDiv2 -> alert

If you click anywhere else -> alert

I would say, this is what you described.

Answer 5

下面应该工作

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