jquery - jQuery在外部单击时隐藏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链接显示菜单，然后单击主体，然后立即将其隐藏。我如何避免这种情况。

谢谢您的指教

最佳答案

您可以使用stopPropagation()阻止click事件从.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();
});