JQuery скрывает div на клик снаружи

Question

Я хотел бы создать простое меню для каждого элемента списка, на который нажали, но скрыть этот div, как только вы нажмете за его пределы. Вот простой код, который, надеюсь, будет иметь смысл.

$('.drillFolder').click(function(){
    var id = $(this).attr('data-folder');
    $(".drillDownFolder ul li > a").attr('data-id', id);
    $(".drillDownFolder").show();
});

$("body").click(function(e){
    if(e.target.className !== "drillDownFolder")
    {
      $(".drillDownFolder").hide();
    }       
});

//The hidden div
<div class="drillDownFolder" style="display:none">
    <ul>
        <li><a href="#" data-id="">Show Image</a></li>
        <li><a href="#" data-id="">Edit Image</a></li>
    </ul>
</div>

Я знаю, что не так, поскольку меню отображается через ссылки .drillFolder, после чего щелчок тела скрывает его. Как я могу избежать этого.

Спасибо, если можете посоветовать

Answer 1

Вы можете остановить распространение события click из обратного вызова .drillFolder с помощью stopPropagation () .

$('.drillFolder').click(function(event){
    event.stopPropagation();
    var id = $(this).attr('data-folder');
    $(".drillDownFolder ul li > a").attr('data-id', id);
    $(".drillDownFolder").show();
});

$("body").click(function(e){
    $(".drillDownFolder").hide();
});

Answer 2

isClicked = function($i, e){
  return $i.length>0 && $(e.target).parents().andSelf().index($i)>-1  ;
}

$ i - это объект jQuery, такой как $ ('# myDiv'), e - объект события

$(document).click(function(e) { 
    if( !isClicked( $('#myDiv') , e ) ) alert('not myDiv '); 
});