同class下拉按钮点击仅触发对应菜单及回显的实现方法

出现所有下拉同步弹出、同步回显的核心原因是原有JS逻辑全局选中了所有.menu、.dropbtn元素统一操作，没有限定操作范围，完全不需要给每个组件单独绑定ID写重复逻辑，通过DOM关联查找+事件委托就能实现一套逻辑复用所有下拉组件。

核心思路 #

所有操作只在当前点击元素所属的组件容器范围内执行，不影响其他同结构的下拉组件。

第一步：修正CSS样式 #

补全容器定位逻辑，修复原有样式的小问题：

/* 新增：下拉容器设为相对定位，作为下拉菜单绝对定位的参照 */
.dropdown-container {
  position: relative;
  display: inline-block;
  margin: 0 12px;
}

.dropdownbox>button {
  color: #7C99AA;
  background-color: white;
  border: 1px solid #7C99AA;
  border-radius: 0.5em;
  padding: 0.7em 1em;
  width: 10vw;
  font-size: 12px;
  line-height: 1.4em;
  user-select: none;
  cursor: pointer;
  text-align: center;
  outline: none;
}

ul.menu {
  list-style: none;
  position: absolute;
  margin: 0;
  width: 8vw;
  overflow: hidden;
  height: 0;
  margin-top: 2px;
  background: white;
  color: #9FA5B5;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0.5em 1em rgb(0 0 0 / 20%);
  /* 修复原代码padding缺单位的问题 */
  padding: 5px 20px;
  z-index: 99;
}

ul.menu li {
  font-size: 16px;
  padding: 0.7em 0em;
  margin: -0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}

ul.menu li:hover {
  color: white;
  background: #7C99AA;
}

.menu.showMenu {
  height: 20vh;
}

第二步：微调HTML结构 #

只需要给三个下拉的最外层包裹元素加上统一的dropdown-container类，原有结构、ID都可以保留，无需大改：

<!-- 外层加统一标识类dropdown-container -->
<div class="wrapCollect3 dropdown-container">
  <div class="dropdownbox">
    <button class="dropbtn" id="penaltybtn">Select</button>
  </div>
  <ul id="menu3" class="menu">
    <li id="applicc">Not Applicable</li>
    <li id="appYes">Yes</li>
    <li id="appNo">No</li>
  </ul>
</div>
<div class="wrapper dropdown-container">
  <div class="dropdownbox">
    <button class="dropbtn" id="offboarding">Select</button>
  </div>
  <ul id="menu1" class="menu">
    <li name="offboarding" id="resignation">Resignation</li>
    <li name="offboarding" id="contract">Contract Expiration</li>
    <li name="offboarding" id="retrenchment">Retrenchment</li>
    <li name="offboarding" id="dismissal">Dismissal</li>
    <li name="offboarding" id="retirement">Retirement</li>
  </ul>
</div>
<div class="collecWrap dropdown-container">
  <div class="dropdownbox">
    <button class="dropbtn" id="dropbtn">Collected</button>
  </div>
  <ul id="menu2" class="menu">
    <li id="returnNot" value="NotReturned">Not Returned</li>
    <li id="majority" value="majority">Majority Returned</li>
    <li id="all">All Returned</li>
  </ul>
</div>

第三步：通用JS逻辑 #

仅需绑定3个全局监听事件，不需要给每个按钮、菜单单独绑定，逻辑可复用给任意数量的同结构下拉：

document.addEventListener('click', function(e) {
  // 处理下拉按钮点击：仅切换当前按钮关联的菜单
  const clickBtn = e.target.closest('.dropbtn');
  if (clickBtn) {
    const currentContainer = clickBtn.closest('.dropdown-container');
    const currentMenu = currentContainer.querySelector('.menu');
    // 先关闭其他所有已打开的菜单
    document.querySelectorAll('.menu.showMenu').forEach(menu => {
      if (menu !== currentMenu) menu.classList.remove('showMenu');
    });
    // 切换当前菜单显隐
    currentMenu.classList.toggle('showMenu');
    return;
  }

  // 处理选项点击：仅更新当前下拉的按钮文本
  const clickOption = e.target.closest('.menu li');
  if (clickOption) {
    const currentContainer = clickOption.closest('.dropdown-container');
    const currentBtn = currentContainer.querySelector('.dropbtn');
    currentBtn.textContent = clickOption.textContent;
    // 选中后关闭当前菜单
    currentContainer.querySelector('.menu').classList.remove('showMenu');
    return;
  }

  // 点击组件外区域：关闭所有打开的菜单
  document.querySelectorAll('.menu.showMenu').forEach(menu => {
    menu.classList.remove('showMenu');
  });
})

• 无冗余代码：一套逻辑支持任意多个同结构下拉，后续新增下拉只需要套用dropdown-container包裹的结构即可，无需修改JS
• 不依赖ID绑定：完全通过DOM从属关系查找关联元素，不需要手动给每个组件配对ID
• 交互符合常规使用习惯：点击其他下拉自动收起已打开菜单、点击空白区域自动收起菜单

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