javascript - 打开其他下拉菜单时关闭下拉菜单

Question

这是我的代码:https://jsfiddle.net/qesr0ybf/

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    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');
      }
    }
  }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    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

将您的函数更新为:

function myFunction() {
    var d2 = document.getElementById("myDropdown2").classList;
    if(d2.contains("show")) d2.toggle("show");
    document.getElementById("myDropdown").classList.toggle("show");
}

其他功能类似。

即，检查另一个下拉列表是否包含 show 类，然后将其删除。

更好的方法是跟踪最后打开的下拉列表并在打开另一个下拉列表之前将其关闭，但由于您只有两个下拉列表，所以应该这样做。

现场演示 here