Question

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

具有onclick功能的图像：

<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函数启动了。

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

Answer 1

您也可以尝试这个。

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

Answer 2

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

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

2 个答案: