更改類onclick文檔上的任何位置關閉菜單？

我用這個代碼，打開和關閉菜單。當有人點擊屏幕上的任何地方時，我該如何關閉它？更改類onclick文檔上的任何位置關閉菜單？

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>

來源

2011-09-10 Anagio

您將在菜單中，您可以編寫代碼需要做兩件事情來實現這一目標：

綁定整個文檔點擊事件，如果顯示菜單，則隱藏菜單。

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

來源

2011-09-11 00:19:46

您好，我更新的jsfiddle顯示一個頁面上有兩個菜單，並增加了一個新的變量，if語句來表示新的菜單ID，但是當我點擊一個菜單，然後其他菜單的標題，他們倆都保持開放。無論如何，當我點擊一個標題時關閉所有其他菜單？ – Anagio

對不起，我用新的jsfiddle沒有意識到我的更新沒有堅持。但基本上我添加了ID C-菜單中一個新的div菜單，然後複製var和if語句，進入C-菜單它點擊關閉任何地方，但兩者的菜單都能夠保持開放時，他們的每一個標題被點擊 – Anagio

什麼你玩過的jsfiddle的鏈接？ –

您可以在document.body的附加一個事件，並在處理程序隱藏這樣

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

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

    }, false);

來源

2011-09-10 05:14:45 jsDebugger

更改類onclick文檔上的任何位置關閉菜單？

回答

相關問題