Question

我使用此代码打开和关闭菜单。当有人点击屏幕上的任何位置时，如何关闭它？

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>

Answer 1

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

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

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()">

请参阅此操作：http://jsfiddle.net/william/Pfv8N/。

更改课程onclick文件上的任何位置以关闭菜单？

1 个答案: