Изменить класс, щелкнуть в любом месте документа, чтобы закрыть меню?

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/.

Answer 2

Вы можете прикрепить событие к document.body и в обработчике вы можете написать свой код скрыть меню как это

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

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

     }, false);