Question

我已经制作了简单的Javascript函数用于显示和隐藏但无法触发外部点击隐藏功能。

HTML

<a href="javascript:void(0);" onClick="showhide()" class="btn" >click </a>

<div id="myID">
    <p>Hello World</p>
</div>

CSS

    .btn{

    color:red;
    border-radius:5px;
    padding:10px;
    display:inline-block;


}

#test{
    display:none;
    border:1px solid blue;
    width:200px;
    height:200px;
    margin:10px
}

的Javascript

    function showhide(){
       var div = document.getElementById("test");
            if (div.style.display !== "none") {
                div.style.display = "none";
            }
        else {
            div.style.display = "block";
        }
}

请检查此代码here。

请不要jQuery。感谢

Answer 1

您可以通过处理全局点击事件来天真地执行此操作，并通过维护状态来帮助自己。

在下面的示例中，元素中的点击次数永远不会到达document，但外部的点击会通过传播进行。单击按钮始终切换显示。请注意，点击任何元素或传播到任何元素会阻止click事件传播到document，这会导致无法正常响应。

var toggle = (function () {
  var visible = false,
      ele = document.getElementById('test'),
      btn = document.querySelector('.btn');
  
  function flip () {
    var display = ele.style.display;
    
    ele.style.display = (display === 'block' ? 'none' : 'block');
    visible = !visible;
  }
  
  btn.addEventListener('click', flip);
  
  ele.addEventListener('click', function (e) {
    e.stopPropagation();
  });
  
  document.addEventListener('click', function (e) {
    if (visible && e.target !== btn) flip();
  });
  
  ele.style.display = 'none';
  
  return flip;
}());

body {
  font-family: sans-serif;
}

.btn {
  width: 180px;
}

#test {
  margin: 10px 0;
  padding: 20px;
  display: none;
  box-sizing: border-box;
  width: 180px;
  height: 180px;
  
  background-color: #eee;
  border: 2px solid #333;
  line-height: 96px;
  text-align: center;
  color: #333;
}

<button class="btn">Click!</button>

<div id="test">
  <p>Hello World!</p>
</div>

文档：

Answer 2

你可以在javscript

中使用两个函数，如onclick和onfocusout

<a href="javascript:void(0);" onClick="showhide()" onfocusout = "focusout()"  class="btn"> click </a>

<div id="test">
    <p>Hello World</p>
</div>

<script>
    function showhide(){
           var div = document.getElementById("test");
            div.style.display = "block";
    }

    function focusout(){
        var div = document.getElementById("test");
        div.style.display = "none";
    }
</script>

如何使用纯javascript单击外部时隐藏/折叠div

2 个答案: