如何用同一个JS函数实现可同时展开、互不遮挡的多个下拉菜单

代码修改方案 #

1. HTML 调整 #

解决重复ID、结构不统一问题：

<div class="container">
  <div class="a">
    <center>
      <!-- 第一个下拉菜单 -->
      <div class="dropdown">
        <button onclick="myFunction(this)" class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <img src="images/E11A.png" class="bottles"/>
          <img src="images/E11A.png" class="bottles"/>
        </div>
      </div>
      <!-- 第二个下拉菜单，补全统一的外层容器 -->
      <div class="dropdown">
        <button onclick="myFunction(this)" class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <img src="images/E11A.png" class="bottles"/>
          <img src="images/E11A.png" class="bottles"/>
        </div>
      </div>
    </center>
  </div>
</div>

修改说明：

• 移除所有重复的id="myDropdown"，ID在单页面中必须唯一
• 给所有下拉按钮的onclick传入this参数，用于识别当前触发点击的按钮
• 给第二个下拉菜单补全class="dropdown"外层容器，统一结构规则

2. CSS 调整 #

确保下拉展开时能挤开下方元素，左侧栏内容溢出可滚动：

/* 原有代码全部保留，仅修改/新增以下属性 */
.a {
  float: left;
  width: 250px;
  height: 100%;
  border: 1px solid blue;
  overflow-y: auto; /* 新增：下拉内容超出左侧栏高度时自动出现滚动条 */
}

.dropdown {
  width: 100%;
  display: block; /* 从inline-block改为block，避免布局错位 */
}

.dropdown-content {
  width: 100%;
  height: 200px;
  overflow: auto; /* 从scroll改为auto，不需要滚动时自动隐藏滚动条 */
  display: none;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  /* 移除无效的z-index属性，默认文档流布局即可自动撑开高度挤开下方元素 */
}

修改说明：

• 下拉内容默认采用正常文档流布局，展开时会自动占据对应高度，下方所有元素会自动向下偏移，不需要额外定位处理

3. JS 调整 #

实现每个按钮仅控制对应下拉，支持多菜单同时展开：

function myFunction(btn) {
  // 获取当前点击按钮对应的下拉内容容器
  const targetDropdown = btn.nextElementSibling;
  targetDropdown.classList.toggle("show");
}

// 如果不需要「点击页面其他位置关闭所有下拉」的逻辑，直接删除下面这段代码即可
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

修改说明：

• 通过传入的按钮元素，直接匹配它相邻的下一个元素（对应下拉内容容器），每个按钮只会控制自己对应的下拉菜单，互相不会干扰
• 多个下拉菜单可以同时展开，展开时自动撑开高度，下方元素自动下移

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