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方法：

brightness = android.provider.Settings.System.getInt(getContentResolver(),   
                            android.provider.Settings.System.SCREEN_BRIGHTNESS);

两个显示/隐藏切换（如果在div外部单击则隐藏）

1 个答案: