通过在外部单击并单击按钮来关闭div

我正在尝试设置一个下拉菜单，可以通过单击外部(打开的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>