Javascript 是否更改类单击文档上的任意位置以关闭菜单？

我使用这个代码来打开和关闭菜单。当有人点击屏幕上的任何地方时，我怎么能让它关闭

function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
} else { 
    myLayer.style.display="none";
}
}

HTML

<div style="float:left;">
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Monitoring</span></a>
<ul id="v-menu" class="v-menu" style="display:none;" >
<li><a href="#" onclick="javascript:showElement('v-menu')">Start</a></li>
<li><a href="#">Stop</a></li>
</div>

您可以在document.body和处理程序中附加事件，并将代码写入其中 像这样隐藏菜单

    document.body.addEventListener("click", function(){

         //conditions to check if click is not on ur menu
         showElement();

     }, false);

---

要实现这一目标，您需要做两件事：

为整个文档绑定单击事件，如果显示菜单，则隐藏菜单

document.addEventListener("click", function(event) {
    var menu = document.getElementById('v-menu');
    if (event.target !== menu && menu.style.display == 'block')
        menu.style.display = "none";
});

---

单击菜单时停止“单击”事件传播，以便事件不会出现在文档中

<a href="javascript:void(0)" class="button" 
    onclick="showElement('v-menu'); event.stopPropagation()">

---

您好，我更新了JSFIDLE以在一个页面上显示两个菜单，并添加了一个新变量和if语句来表示新的菜单ID，但是当我单击一个菜单时，另一个菜单的标题将保持打开状态。当我点击一个菜单标题时，是否关闭所有其他菜单？对不起，我是JSFIDLE新手，没有意识到我的更新没有坚持。但基本上我添加了一个新的div菜单，ID为c-menu，然后复制了var和if语句，并输入了c-menu。它在单击任意位置时关闭，但两个菜单在单击它们的标题时都可以保持打开状态。您使用的JSFIDLE链接是什么？