關閉菜單/格關閉

Question

我一直在嘗試使菜單關閉，當我點擊頁面上的任何地方，除了菜單內。

我設法做到這一點，當菜單內的鏈接被點擊時，通過給它提供與菜單按鈕相同的onclick函數，但我沒有成功點擊菜單關閉它。

http://codepen.io/anon/pen/LEvdmW

JS

function setVisibility(id) { 
    var targetButton; 
    switch(id) { 
    case "layer": 
     targetButton = "button"; 
     break; 
    } 
    if (document.getElementById(targetButton).value == 'Close') { 
    document.getElementById(targetButton).innerHTML = 'Open'; 
    document.getElementById(targetButton).value = 'Open'; 
    document.getElementById(id).style.display = 'none'; 
    } else { 
    document.getElementById(targetButton).innerHTML = 'Close'; 
    document.getElementById(targetButton).value = 'Close'; 
    document.getElementById(id).style.display = 'inline'; 
    } 
} 

HTML

<button name="type" id="button" onclick="setVisibility('layer')">Open</button> 
<div id="layer"><a onclick="setVisibility('layer')"> Hello</div> 

CSS

#layer { 
    position: absolute; 
    left: 8px; 
    top: 50px; 
    background-color: #989898; 
    width: 280px; 
    height: 100px; 
    padding: 10px; 
    color: black; 
    display: none; 
} 


button { border:none; background:#989898; color:#fff; padding:10px; outline:none; cursor:pointer; 

} 

Answer 1

它可以通過下面的代碼來實現。

$(document).mouseup(function (e) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.hide(); 
    } 
}); 

工作小提琴：http://jsfiddle.net/LCB5W/153/

更新小提琴：http://jsfiddle.net/LCB5W/154/

Answer 2

你可以有，你有你的onclick事件隱藏的div股利身後的背景。檢查下面（修改你的代碼爲你懂的）修改後的代碼：

工作例如：DEMO HERE

HTML

<button name="type" id="button" onclick="setVisibility('layer')">Open</button> 
<div id="backdrop" onclick="setVisibility('layer')"></div> 
<div id="layer">Hello</div> 

CSS

#layer { 
    position: absolute; 
    left: 8px; 
    top: 50px; 
    background-color: white; 
    width: 280px; 
    height: 100px; 
    padding: 10px; 
    color: black; 
    display: none; 
    z-index : 999; 
} 

#backdrop { 
    position : absolute; 
    top : 0; 
    left : 0; 
    width : 100%; 
    height : 100%; 
    background : black; 
    opacity : 0.5; 
    z-index : 2; 
    display : none; 
} 

button { 
    border:none; 
    background:#989898; 
    color:#fff; 
    padding:10px; 
    outline:none; 
    cursor:pointer; 
} 

JS

function setVisibility(id) { 
    var targetButton; 
    switch(id) { 
    case "layer": 
     targetButton = "button"; 
     break; 
    } 
    if (document.getElementById(targetButton).value == 'Close') { 

    document.getElementById(targetButton).innerHTML = 'Open'; 
    document.getElementById(targetButton).value = 'Open'; 
    document.getElementById(id).style.display = 'none'; 
    document.getElementById("backdrop").style.display = "none"; 

    } else { 

    document.getElementById("backdrop").style.display = "block"; 
    document.getElementById(targetButton).innerHTML = 'Close'; 
    document.getElementById(targetButton).value = 'Close'; 
    document.getElementById(id).style.display = 'inline'; 

    } 
}