双下拉多选菜单布局异常：展开首个Dropdown时第二个下拉下移

问题描述 #

开发双下拉多选菜单时遇到异常：点击第一个下拉菜单时，第二个下拉菜单会被挤到底部。预期效果是第一个下拉及其选项固定在顶部，展开时不影响第二个下拉的位置。

问题原因 #

当前第一个下拉的选项列表使用position: relative，会占据文档流空间，导致下方元素被挤压。需要将选项列表改为绝对定位，脱离文档流，同时确保父容器为相对定位，让下拉列表相对于父容器定位。

修改方案 #

1. CSS 核心修改 #

调整.list-items的定位属性，使其脱离文档流：

/*drop-down Items*/
.list-items {
  /* 替换relative为absolute */
  position: absolute;
  width: 100%;
  top: calc(100% + 7px); /* 与原margin-top保持一致的间距 */
  left: 0;
  border-radius: 5px;
  /* 移除margin-top，绝对定位无需占用文档流空间 */
  background-color: var(--gray);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  display: none;
  z-index: 10; /* 确保下拉列表在最上层，不被其他元素遮挡 */
}

注：父容器.container已设置position: relative，无需修改，这样绝对定位的列表会相对于父容器定位。

2. JS 修复（解决单个按钮绑定+独立计数问题） #

原代码仅绑定了第一个下拉按钮，且选中计数会影响所有下拉的文本，需修改为针对每个下拉独立处理：

// 选中所有下拉按钮
const selectBtns = document.querySelectorAll(".select-btn");
const items = document.querySelectorAll(".items");

// 给每个下拉按钮绑定展开/收起事件，同时关闭其他下拉
selectBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    selectBtns.forEach(otherBtn => {
      if(otherBtn !== btn) otherBtn.classList.remove("open");
    });
    btn.classList.toggle("open");
  });
});

// 处理选项选中状态与文本更新
items.forEach(item => {
  item.addEventListener("click", () => {
    item.classList.toggle("checked");
    
    // 找到当前下拉对应的容器和文本元素
    const container = item.closest(".container");
    const btnText = container.querySelector(".btn-text");
    const checkedItems = container.querySelectorAll(".checked");

    if (checkedItems.length === 1) {
      btnText.innerText = `${checkedItems.length} Selected Item`;
    } else if (checkedItems.length > 1) {
      btnText.innerText = `${checkedItems.length} Selected Items`;
    } else {
      // 恢复对应下拉的默认文本
      btnText.innerText = btnText.dataset.default;
    }
  });
});

3. HTML 补充默认文本标识 #

给每个下拉的文本元素添加默认文本的data属性，用于清空选中时恢复默认：

<!-- 第一个下拉 -->
<span class="btn-text" data-default="Select Year and Semester">Select Year and Semester</span>

<!-- 第二个下拉 -->
<span class="btn-text" data-default="Select Subject">Select Subject</span>

修改后效果 #

第一个下拉的选项列表会悬浮在父容器下方，脱离文档流，不会挤压第二个下拉的位置；同时修复了第二个下拉按钮无法展开的问题，且每个下拉的选中计数独立，点击其他下拉时会自动关闭当前打开的下拉，提升交互体验。

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