通过单击外部并单击按钮来关闭 div [重复]答案

【问题标题】：Closing a div by clicking outside and clicking a button [duplicate]通过单击外部并单击按钮来关闭 div [重复]
【发布时间】：2019-08-16 11:40:12
【问题描述】：

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

带有点击功能的图片：

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

应该打开和关闭的下拉列表，类声明下拉为display:none：

<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 功能启动了。

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

【问题讨论】：

标签： javascript jquery css onclick addeventlistener

【解决方案1】：

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

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>

【讨论】：

这太完美了！非常感谢（Y）
@JohnDoe 很高兴我能帮上忙 :)
@JohnDoe 因为event.target 是锚标签，您可以将条件更改为if ((event.target === img || event.target.tagName == "A") && dropd.style.display === "none") 以使其适用于锚标签
它失败了，因为dropd.style.display 是block，使用if ((event.target === img) && dropd.style.display === "none" || (event.target.tagName === "A" && dropd.style.display === "block")) {，我的错
你是我的英雄！谢谢！ :)

【解决方案2】：

你也可以试试这个。

  $(window).click(function() { //Hide the menus if visible });

【讨论】：