多下拉菜单异常：第二个菜单无法通过窗口点击响应

问题原因 #

1. 按钮类名不匹配：HTML中第二个下拉按钮的class是dropbtn，但JS关闭逻辑里判断的是.clicked，导致触发条件永远不成立；同时CSS里定义的.clicked样式也未生效。
2. 逻辑方向错误：第二个下拉的关闭逻辑写反了——原本应该是点击非按钮区域时关闭，代码里写成了点击按钮区域时才执行关闭。

修正步骤及代码 #

1. 修正HTML：给第二个按钮添加正确类名 #

把第二个按钮的class从dropbtn改成clicked，对应CSS和JS的选择器：

<div class="account-logo">
  <p onclick="my()" class="clicked">
    <i class="fa fa-user" aria-hidden="true"></i>
    <i class="fa fa-caret-down" aria-hidden="true"></i>
  </p>
  <div id="myaccountDropdown" class="dropdown-accountsetting">
    <a href="#">Linked 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

2. 修正JS：调整第二个下拉的关闭逻辑 #

把第二个判断的条件改为!event.target.matches(".clicked")，确保点击非按钮区域时触发关闭：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function my() {
  document.getElementById("myaccountDropdown").classList.toggle("showed");
}

function handleClick(event) {
  // 处理第一个下拉菜单：点击非.dropbtn区域时关闭
  if (!event.target.matches(".dropbtn")) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains("show")) {
        openDropdown.classList.remove("show");
      }
    }
  }

  // 处理第二个下拉菜单：点击非.clicked区域时关闭
  if (!event.target.matches(".clicked")) {
    var accountDropdowns = document.getElementsByClassName("dropdown-accountsetting");
    for (var i = 0; i < accountDropdowns.length; i++) {
      var openDropdown = accountDropdowns[i];
      if (openDropdown.classList.contains("showed")) {
        openDropdown.classList.remove("showed");
      }
    }
  }
}

window.addEventListener("click", handleClick);

3. 可选优化：点击下拉内容时不关闭 #

如果希望点击下拉菜单内部时保持展开状态，可以给判断条件增加排除下拉内容的逻辑：

function handleClick(event) {
  // 第一个下拉：点击非.dropbtn且非.dropdown-content内部时关闭
  if (!event.target.matches(".dropbtn") && !event.target.closest(".dropdown-content")) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains("show")) {
        openDropdown.classList.remove("show");
      }
    }
  }

  // 第二个下拉：点击非.clicked且非.dropdown-accountsetting内部时关闭
  if (!event.target.matches(".clicked") && !event.target.closest(".dropdown-accountsetting")) {
    var accountDropdowns = document.getElementsByClassName("dropdown-accountsetting");
    for (var i = 0; i < accountDropdowns.length; i++) {
      var openDropdown = accountDropdowns[i];
      if (openDropdown.classList.contains("showed")) {
        openDropdown.classList.remove("showed");
      }
    }
  }
}

效果验证 #

修改后，点击第二个按钮可正常切换下拉菜单的显示/隐藏，点击窗口任意非下拉内容区域时，下拉菜单会自动关闭，与第一个下拉菜单行为保持一致。

内容的提问来源于stack exchange，提问作者Zool Cool2022