jQuery在外面点击时隐藏一个div答案

【问题标题】：jQuery hiding a div on click outsidejQuery在外面点击时隐藏一个div
【发布时间】：2010-05-02 15:23:33
【问题描述】：

我想为每个单击的列表元素构建一个简单的菜单，但是一旦您在它之外单击，就会隐藏这个 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 链接显示的，然后正文单击会立即将其隐藏。我怎样才能避免这种情况。

谢谢你的建议

【问题讨论】：

标签： jquery click show-hide

【解决方案1】：

您可以使用stopPropagation() 阻止点击事件从 .drillFolder 回调中传播出去。

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

【讨论】：

这太容易了。 TY 这么多。

【解决方案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 '); 
});

【讨论】：