Javascript 单击关闭菜单/div关闭

当我点击页面上除菜单内之外的任何地方时，我一直试图关闭菜单

当在菜单中单击一个链接时，我通过赋予它与菜单按钮相同的onclick功能来实现这一点，但我没有成功地单击菜单关闭它

JS

HTML

---

它可以通过下面的代码实现

$(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();
    }
});

工作小提琴：

---

更新的Fiddle:

可以通过以下代码实现

$(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();
    }
});

工作小提琴：

---

更新的Fiddle:

您可以在div后面有一个背景，在那里您可以使用onclick事件来隐藏div。请检查下面修改的代码（修改代码以便您理解）：

工作示例：

HTML

JS

---

您可以在div后面有一个背景，在那里您可以使用onclick事件来隐藏div。请检查下面修改的代码（修改代码以便您理解）：

工作示例：

HTML

JS

---

---

您是受限于javascript解决方案还是可以alos jQuery？jQuery也很抱歉，我忘了添加它。您是受限于javascript解决方案还是可以alos jQuery？jQuery也很抱歉，我忘了添加它。可以，只是尝试将其实现到我现有的代码中，目前在使其正常工作方面有点困难。你的提琴工作得很好，虽然我只是无法让它与我的代码@Jitendra一起工作，我可能误解了一些非常简单的东西。在问题中替换你的菜单html。我现在添加了它@JitendraThanks，我根据你的评论添加了#layer，但我在测试时一定把它搞砸了，因为它不起作用。不过你的小提琴不行。令人惊叹的是，只要尝试在我现有的代码中实现它，就可以了，但目前要让它工作起来有点困难。你的提琴工作得很好，虽然我只是无法让它与我的代码@Jitendra一起工作，我可能误解了一些非常简单的东西。在问题中替换你的菜单html。我现在添加了它@JitendraThanks，我根据你的评论添加了#layer，但我在测试时一定把它搞砸了，因为它不起作用。不过你的小提琴不行。非常感谢，我的问题是点击背后的层。所以，如果我点击一个链接，我必须点击两次。一次关闭菜单，第二次点击页面上的链接。我不这么认为。你试过了吗。。？出于同样的原因，我使用z-index…background将保留在div后面。您的意思是，如果页面上有任何链接，即使在div之外，您也应该能够单击它，并且在相同的tym下，您的div也应该隐藏。它看起来更像是一个弹出窗口，而不是一个菜单。谢谢，我与此相关的问题是单击后面的层。所以，如果我点击一个链接，我必须点击两次。一次关闭菜单，第二次点击页面上的链接。我不这么认为。你试过了吗。。？出于同样的原因，我正在使用z-index…background将保留在div后面，无论您的意思是，如果页面上有任何链接，即使在div之外，您也应该能够单击它，并且在相同的tym下，您的div也应该隐藏..？它看起来更像是一个弹出窗口，而不是一个菜单。

#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;

}

$(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();
    }
});

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

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

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';

  }
}