点击外部控制Dropdown菜单显隐：下拉列表无故消失求助

你的下拉菜单点击后立即消失，核心问题有三个：

1. 事件目标判定偏差 #

按钮内部包含<i>图标标签，点击按钮时，事件目标(Event.target)可能是这个图标而非.dropbtn按钮本身。你写的window点击事件逻辑里，只要目标不是.dropbtn就关闭下拉，导致菜单刚展开就触发关闭。

2. 事件冒泡冲突 #

按钮的点击事件会冒泡到window层级，触发window的click监听，即使点击的是按钮本身，也可能因为事件执行顺序导致下拉刚展开就被关闭。

3. CSS属性冗余冲突 #

.dropdown-content同时设置了display: none和visibility: hidden，两个属性同时控制元素可见性，导致显示逻辑混乱。

修复后的完整代码 #

JavaScript 部分 #

// Rotation arrow icon on click + 下拉菜单切换
const acc = document.getElementsByClassName("switch");
for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function(e) {
    // 阻止事件冒泡到window，避免触发关闭逻辑
    e.stopPropagation();
    this.classList.toggle("active");
    this.classList.toggle("iconUp");
    // 合并下拉菜单切换逻辑
    document.getElementById("myDropdown").classList.toggle("show");
  });
}

// 点击外部关闭下拉菜单
window.addEventListener('click', function(e) {
  const dropdown = document.getElementById("myDropdown");
  const dropbtn = document.querySelector('.dropbtn');
  // 判断点击目标是否属于按钮或下拉菜单内部
  if (!dropbtn.contains(e.target) && !dropdown.contains(e.target)) {
    if (dropdown.classList.contains('show')) {
      dropdown.classList.remove('show');
      // 同步重置按钮图标状态
      dropbtn.classList.remove('iconUp');
    }
  }
});

CSS 部分 #

移除.dropdown-content中冗余的visibility: hidden：

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 11;
    border-radius: 0.4rem;
    padding: 2rem;
    gap:1.5rem;
    flex-direction: column;
    opacity: 100%;
}

HTML 部分 #

移除按钮的内联onclick事件：

<button class="dropbtn switch">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></button>

关键修复说明 #

• 用e.stopPropagation()阻断按钮点击事件的冒泡，避免触发window层级的关闭逻辑。
• 通过element.contains(e.target)精准判断点击区域，只有点击按钮和下拉菜单之外的区域才关闭菜单。
• 合并下拉切换逻辑到按钮监听中，去掉内联事件，代码更易维护。
• 清理冗余CSS属性，确保显示隐藏仅由display属性控制。

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