点击关闭菜单/div关闭

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

您可以在 div 后面有一个背景，您可以在其中设置 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';

  }
}