通过在外部单击并单击按钮来关闭div [英] Closing a div by clicking outside and clicking a button

问题描述

我正在尝试设置一个下拉菜单，可以通过单击外部(打开的div)并通过单击按钮/img(打开div)来关闭该菜单。

带有onClick功能的图像：

<img onclick="hide()" id="menu" src="....">

应打开和关闭的下拉列表，类声明下拉列表为显示：无：

<ul id="dropdown" class="dropdown-breadcrumb">
   <li>...</li>
</ul>

这是我目前为止的解决方案：

function hide() {
    var x = document.getElementById("dropdown");

    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

当我尝试添加当用户在下拉列表之外单击时关闭该下拉列表的函数时：

window.addEventListener('mouseup',function(event){
        var dropd = document.getElementById('dropdown');

        if(event.target != dropd && event.target.parentNode != dropd){
            dropd.style.display = 'none';
        }
});

然后我得到一个打开的下拉列表，因为onClick-函数启动了。

有人能帮我组合这些功能吗？谢谢！

推荐答案

您可以将所有逻辑带到单击侦听器，并在函数中处理元素的可见性：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

window.addEventListener('mousedown', function(event) {
  var dropd = document.getElementById('dropdown');
  var img = document.getElementById('menu');

  if (event.target === img && dropd.style.display === "none") {
    dropd.style.display = "block";
  } else if (event.target != dropd && event.target.parentNode != dropd) {
    dropd.style.display = 'none';
  }
});

<img id="menu" alt="img" />
<ul id="dropdown" class="dropdown-breadcrumb" style="width: 40px;">
  <li>First</li>
  <li>Second</li>
</ul>

这篇关于通过在外部单击并单击按钮来关闭div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！