如何使用同一个JS函数实现多个纯JS下拉菜单均可独立触发展开？

问题核心原因 #

• 原代码固定通过ID myDropdown 查找下拉内容，HTML中如果多个下拉菜单复用这个ID会出现ID重复冲突，浏览器只会返回第一个匹配的元素
• 触发函数没有关联当前点击的按钮对应的下拉内容，导致所有按钮都只会操作同一个下拉面板

调整后的完整代码 #

JS代码 #

// 传入当前点击的按钮元素作为参数
function myFunction(triggerBtn) {
  // 找到按钮所属的dropdown容器，再查找对应的下拉内容面板
  const targetDropdown = triggerBtn.parentNode.querySelector('.dropdown-content');
  // 展开当前下拉前先关闭其他所有已打开的下拉面板（如果需要允许多个下拉同时展开，删除下面4行即可）
  const allDropdowns = document.querySelectorAll('.dropdown-content');
  allDropdowns.forEach(item => {
    if (item !== targetDropdown) item.classList.remove('show');
  });
  // 切换当前下拉面板的展开状态
  targetDropdown.classList.toggle('show');
}

// 点击外部关闭所有下拉的逻辑不需要改动
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');
      }
    }
  }
}

HTML代码 #

<!-- 第一个下拉菜单 -->
<div class="dropdown">
  <!-- 触发函数传入当前按钮元素this，不需要给下拉面板设置ID -->
  <button onclick="myFunction(this)" class="dropbtn">产品分类1</button>
  <div class="dropdown-content">
    <img src="images/E11A.png" class="bottles" alt="产品图" />
    <img src="images/E11A.png" class="bottles" alt="产品图" />
  </div>
</div>

<!-- 第二个下拉菜单，直接复用结构即可 -->
<div class="dropdown">
  <button onclick="myFunction(this)" class="dropbtn">产品分类2</button>
  <div class="dropdown-content">
    <img src="images/xxx.png" class="bottles" alt="产品图" />
    <img src="images/xxx.png" class="bottles" alt="产品图" />
  </div>
</div>

调整说明 #

• 不需要为每个下拉面板设置唯一ID，复用同一套类名即可
• 触发函数通过DOM父子关联关系自动匹配当前按钮对应的下拉面板，支持无限新增下拉菜单
• 可根据业务需求选择是否保留「展开当前下拉时关闭其他已展开下拉」的逻辑

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