要隐藏文件TreeClass（如果在其外部单击），请执行以下操作：

jQuery(document).mouseup(function (e) {
    var container = $(".fileTreeClass");
    if (!container.is(e.target) && // If the target of the click isn't the container...
         container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Use:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

我不认为你真正需要的是当用户在外面点击时关闭菜单；您需要的是当用户单击页面上的任何位置时关闭菜单。如果你点击菜单，或者离开菜单，它应该会关闭吗？

发现上面没有令人满意的答案，促使我前几天写了这篇博文。对于更迂腐的人，有很多陷阱需要注意：

如果在单击时将单击事件处理程序附加到body元素，请确保在关闭菜单并解除事件绑定之前等待第二次单击。否则，打开菜单的单击事件将弹出到必须关闭菜单的侦听器。若在单击事件上使用event.stopProposition（），则页面中的其他元素都不能在任何位置单击以关闭功能。无限期地将click事件处理程序附加到body元素不是一个高性能的解决方案将事件的目标及其父级与处理程序的创建者进行比较时，假设您想要的是在单击关闭菜单时关闭菜单，而真正想要的是当您单击页面上的任何位置时关闭菜单。监听body元素上的事件会使代码更加脆弱。像这样无辜的风格会破坏它：body｛margin-left:auto；margin-right:auto；width:960px；｝

投票选出最受欢迎的答案，但添加

&& (e.target != $('html').get(0)) // ignore the scrollbar

因此，单击滚动条不会隐藏目标元素。

我知道这个问题有一百万个答案，但我一直喜欢使用HTML和CSS来完成大部分工作。在这种情况下，z索引和定位。我找到的最简单的方法如下：

$（“#show trigger”）.click（function（）{$（“#element”）.animate（｛width:'toggle'｝）；$（“#外部元素”）.show（）；});$（“#外部元素”）.click（function（）{$（“#element”）.hide（）；$（“#外部元素”）.hide（）；});#外部元件{位置：固定；宽度：100%；高度：100%；z指数：1；显示：无；}#元素{显示：无；填充：20px；背景色：#ccc；宽度：300px；z指数：2；位置：相对；}#显示触发器{填充：20px；背景色：#ccc；边距：20px自动；z指数：2；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“outside element”></div><div id=“element”><div class=“menu item”><a href=“#1”>菜单项1</a></div><div class=“menu item”><a href=“#2”>菜单项1</a></div><div class=“menu item”><a href=“#3”>菜单项1</a></div><div class=“menu item”><a href=“#4”>菜单项1</a></div></div><div id=“show trigger”>显示菜单</div>

这创建了一个安全的环境，因为除非菜单实际打开，否则不会触发任何内容，并且z索引保护元素中的任何内容在被单击时不会产生任何错误。

此外，您不需要jQuery用传播调用覆盖所有基础，也不需要清除所有内部元素中的错误。

这是一个经典的例子，对HTML进行调整将是更好的解决方案。为什么不在不包含菜单项的元素上设置单击？那么您不需要添加传播。

$('.header, .footer, .main-content').click(function() {
//Hide the menus if visible
});