Question

我有这个代码，当div点击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>

Answer 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>

使div显示为none

1 个答案: