Question

当我单击屏幕上的任意位置时，什么都没有发生，它不会删除课程显示...我看过其他帖子，但那些内容也对我不起作用

function dropdownmenu() {
  document.getElementById("settingsPanel").classList.toggle("show");
  document.getElementById("og-settings").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content menu-panel");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

<button onclick="dropdownmenu()" class="dropbtn">
</button>

<div id="settingsPanel" class="dropdown-content">
  <div id="og-settings" class="menu-panel" style="background-color: #e8a0a0">
  </div>
</div>

Answer 1

如果您有一个以上的类，则不能使用getElementsByClassName（）方法来实现，而是使用带有逗号分隔的类选择器的querySelectorAll（）方法。

document.querySelectorAll('.dropdown-content .menu-panel')

如果div包含某些类，则window.onclick函数不会删除类

1 个答案: