原生JS点击同名类下拉按钮仅触发首个对应菜单问题

代码始终触发第一个卡片下拉菜单的核心问题是元素选择逻辑错误：

• document.querySelector(".dropdown-content") 只会返回DOM中第一个匹配.dropdown-content类的元素，全局缓存的这个引用永远指向第一张卡片的下拉菜单
• 点击事件没有和当前操作的按钮做关联，所有按钮的点击逻辑都在操作同一个提前缓存的第一个下拉元素

原有HTML和CSS无需修改，只需要替换JavaScript逻辑即可，修复后完整JS代码如下：

// 遍历所有下拉选项按钮绑定事件
document.querySelectorAll(".dropdown-toggle").forEach(button => {
  button.addEventListener("click", (e) => {
    // 阻止事件冒泡，避免触发全局点击关闭
    e.stopPropagation();
    // 定位当前按钮对应的同卡片下拉菜单
    // 若后续DOM结构调整，可替换为 const currentDropdown = button.closest('li').querySelector('.dropdown-content') 提升容错
    const currentDropdown = button.nextElementSibling;
    
    // 关闭其他已打开的下拉菜单，实现互斥效果
    document.querySelectorAll(".dropdown-content.show-dropdown").forEach(dropdown => {
      if (dropdown !== currentDropdown) dropdown.classList.remove("show-dropdown");
    });

    // 切换当前菜单的显示状态
    currentDropdown.classList.toggle("show-dropdown");
  });
});

// 点击页面空白区域关闭所有打开的下拉菜单
document.addEventListener("click", () => {
  document.querySelectorAll(".dropdown-content.show-dropdown").forEach(dropdown => {
    dropdown.classList.remove("show-dropdown");
  });
});

• 移除了错误的全局单一下拉菜单缓存，每次点击时基于当前触发事件的按钮，就近查找所属卡片内的对应下拉菜单，不会跨卡片误操作
• 新增菜单互斥逻辑：打开当前菜单时自动关闭其他已展开的菜单，符合常规组件交互预期
• 新增点击空白关闭菜单的通用交互，无需改动现有样式和结构
• 全部基于原生JavaScript实现，无任何第三方依赖

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