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

打开其他下拉列表时关闭下拉列表

1 个答案: