如何实现点击触发的多按钮下拉菜单？

你当前的代码问题在于，点击任何按钮都会切换所有下拉菜单的active类，导致所有菜单同时显示/隐藏，这不是多按钮对应独立下拉的效果。下面给你两种实用的实现方式：

方式一：利用DOM结构关联（按钮与菜单为兄弟元素） #

先调整HTML结构，把按钮和对应的下拉菜单放在同一个容器里：

<div class="menu-group">
  <button class="submenu-btn">按钮1</button>
  <div class="submenu-content">下拉内容1</div>
</div>
<div class="menu-group">
  <button class="submenu-btn">按钮2</button>
  <div class="submenu-content">下拉内容2</div>
</div>

然后修改JS代码，点击按钮时只操作它对应的兄弟下拉菜单：

const submenuBtn = document.querySelectorAll(".submenu-btn");

submenuBtn.forEach(btn => {
  btn.addEventListener("click", () => {
    // 找到当前按钮的兄弟下拉菜单
    const targetContent = btn.nextElementSibling;
    // 切换当前菜单的显示状态
    targetContent.classList.toggle("active");
    
    // 可选：点击当前按钮时自动关闭其他菜单
    submenuBtn.forEach(otherBtn => {
      if (otherBtn !== btn) {
        const otherContent = otherBtn.nextElementSibling;
        otherContent.classList.remove("active");
      }
    });
  });
});

方式二：用自定义data属性绑定按钮与菜单 #

如果DOM结构不固定，用自定义属性更灵活：

<button class="submenu-btn" data-target="menu1">按钮1</button>
<div class="submenu-content" id="menu1">下拉内容1</div>

<button class="submenu-btn" data-target="menu2">按钮2</button>
<div class="submenu-content" id="menu2">下拉内容2</div>

对应的JS代码：

const submenuBtn = document.querySelectorAll(".submenu-btn");

submenuBtn.forEach(btn => {
  btn.addEventListener("click", () => {
    // 获取按钮绑定的菜单ID
    const targetId = btn.dataset.target;
    const targetContent = document.getElementById(targetId);
    
    // 切换目标菜单的显示状态
    targetContent.classList.toggle("active");
    
    // 可选：关闭其他已打开的菜单
    document.querySelectorAll(".submenu-content").forEach(content => {
      if (content.id !== targetId) {
        content.classList.remove("active");
      }
    });
  });
});

补充CSS样式（让下拉菜单正常显示/隐藏） #

.submenu-content {
  display: none; /* 默认隐藏 */
}
.submenu-content.active {
  display: block; /* 激活时显示 */
}

内容的提问来源于stack exchange，提问作者Виталий Кравченко