用纯JavaScript编写的方法

let menu = document.getElementById("menu");

document.addEventListener("click", function(){
    // Hide the menus
    menu.style.display = "none";
}, false);

document.getElementById("menuscontainer").addEventListener("click", function(e){
    // Show the menus
    menu.style.display = "block";
    e.stopPropagation();
}, false);

我知道这个问题有一百万个答案，但我一直喜欢使用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用传播调用覆盖所有基础，也不需要清除所有内部元素中的错误。

正如另一位海报所说，有很多陷阱，特别是如果你正在显示的元素（在本例中是菜单）具有交互元素。我发现以下方法相当稳健：

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

使用not（）：

$("#id").not().click(function() {
    alert('Clicked other that #id');
});

对于iPad和iPhone等触摸设备，我们可以使用以下代码：

$(document).on('touchstart', function (event) {
    var container = $("YOUR CONTAINER SELECTOR");

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

检查窗口单击事件目标（它应该传播到窗口，只要它没有在其他地方被捕获），并确保它不是任何菜单元素。如果不是，那么你就在菜单之外。

或者检查单击的位置，看看它是否包含在菜单区域中。