使 div 显示为 none答案

【问题标题】：Making a div to display as none使 div 显示为 none
【发布时间】：2016-06-08 08:01:49
【问题描述】：

我有这段代码，当单击 div 之外的任何地方时，它使 div 显示为 none。但我的问题是，如果 div 显示为块，我还希望使 div 显示块的链接也关闭 div，所以我运行了以下代码：

function show_div(x){
    var box = document.getElementById(x);
    if(box.style.display=='block'){
        box.style.display='none';
    } else {
        box.style.display='block';
        window.addEventListener('mouseup', function(event){
            if(event.target != box && event.target.parentNode != box){
                box.style.display='none';
            }
        });
    }
}

但链接不会关闭 div。如果我这样运行它：

function show_div(x){
    var box = document.getElementById(x);
    if(box.style.display=='block'){
        box.style.display='none';
    } else {
        box.style.display='block';
    }
}

链接打开和关闭 div，但我也希望在 div 之外的任何地方单击也可以关闭 div。请有人对我如何实现这一目标有更好的想法吗？这是我的 HTML：

<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>

【问题讨论】：

你使用了 jQuery 标签，这里没有 jQuery。你接受 jQuery 答案吗？
jsfiddle.net/victor_007/2gyg5m85/1 使用 css。将它放在一个包装器中，然后将另一个 div 放在包装器的底部，填充整个屏幕但不可见。但如果单击也会隐藏 div。
@Drew... 糟糕，我急于输入问题。如果你有 jQuery 解决方案，我可以接受

标签： javascript jquery

【解决方案1】：

正如 Portal_Zii 所说，您可能需要一个 div 的包装器/容器来隐藏它，但这个示例应该可以为您提供一个基本概念。

$(document).ready(function() {

  var $div = $("#divd");

  $("a").on("click", function() {
    $div.toggle(); // this is to toggle div visibilty
  });

  $div.on("click", function(e) {
    // prevent div from closing when clicking inside
    e.preventDefault();
    return false;
  });

  $div.parent().on("click", function() {
    // hide div when user clicks inside div's parent element
    $div.hide();
  });

});

.container {
  background: red;
  height: 100px;
  padding: 20px;
}
#divd {
  background: blue;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#">click</a>

<div class="container">

  <div id="divd">this is the div</div>

</div>

【讨论】：