javascript - 关闭可点击菜单

Question

我有一个代码可以创建一个可点击的下拉菜单，并在我点击下拉激活器外部时将其关闭。它运作良好，但我在页面上有不止一个下拉激活器。当我依次单击一个激活器时，上一个下拉列表不会隐藏。

function dropDownFunction(iD) {
  document.getElementById(iD).getElementsByClassName("dropdown-content")[0].classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropdown')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

有没有办法在我点击另一个下拉菜单时隐藏下拉菜单？

Answer 1

当您使用类管理下拉列表时，您可以在切换之前删除您的显示类。

如果您想了解更多信息，请创建一个 codepen/jsfiddle 来解决这个问题。