javascript - 两个显示/隐藏切换(如果单击外部 div 则隐藏它们)问题

Question

我想包括两个按钮切换以显示/隐藏两个不同的元素，并在 div 区域外单击时隐藏这些元素。我整天都在研究，虽然我找到了只使用一个元素的答案，但我无法让它与两个元素一起工作。如果我包含在 div 外部单击时隐藏的代码，则第二个元素不会显示。这是代码:

function myFunction() {

  document.getElementById("myDropdown").classList.toggle("show");

}

function myOtherFunction() {
  document.getElementById("myResponsive").classList.toggle("show");

}

window.onclick = function(e) {

  if (!(e.target.matches('.dropbtn') || e.target.matches('.mobile-button'))) {

    var myDropdown =
      document.getElementById("myDropdown");

    var myResponsive =
      document.getElementById("myResponsive");

    if ((myDropdown.classList.contains('show')) ||
      (myResponsive.classList.contains('show'))) {

      myDropdown.classList.remove('show');

      myResponsive.classList.remove('show');

    }
  }
}

.dropdown-content {
  display: none;
  float: left
}

.responsive-menu {
  display: none;
  float: left;
}

.show {
  display: block;
}

<div>
  <button class="dropbtn" onclick="myFunction()">menu1</button>
  <div class="dropdown-content" id="myDropdown">
    <a href="">item 1</a>
    <a href="">item 2</a>
  </div>
</div>
<div>
  <button class="mobile-button" id="mobileMenu" onclick="myOtherFunction()">menu2</button>

  <div class="responsive-menu" id="myResponsive">
    <a href="">item1</a><br>
    <a href="">item2</a>
  </div>
</div>

如果能提供一点帮助和建议，我们将不胜感激。非常感谢。

Answer 1

您的代码无法正常工作，因为您没有正确使用 Element.matches 方法。 Element.matches 方法只接受一个参数，该参数对应于您要匹配的选择器 ( see here )。您向它传递了两个参数，它只是忽略了第二个参数。

要修复，只需按如下方式修改您的 if 语句以正确使用 Element.matches 方法:

if (!(e.target.matches('.dropbtn') || e.target.matches('.mobile-button')))