メニューを閉じるには、ドキュメント上のクラスonclick anyplaceを変更しますか？

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"; 
} 
} 

あなたはdocument.bodyにイベントを添付することができますし、 この

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

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

    }, false); 

Answer 1

あなたは意志のようなメニューを非表示にするには、ハンドラにあなたのコードを書くことができます

<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 2

HTMLこれを達成するために2つのことを行う必要があります。

文書全体のクリックイベントをバインドします。 dメニューが表示されている場合は非表示にします。

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