17370845950

本文介绍如何将静态下拉菜单升级为可交互的选择式组件，使用户点击 `` 选项后，自动关闭菜单并将选中项文本同步显示在触发按钮上，同时保持完全自定义的样式控制。

要实现「点击下拉项即设为当前选中，并更新按钮显示文本」的效果，核心在于：拦截对下拉项（）的点击事件，提取其文本内容，赋值给按钮，并收起菜单。原代码仅处理了“点击外部区域收起菜单”，但未响应菜单项的点击逻辑。我们需增强 window.onclick 监听器，精准识别并处理 元素的点击。

以下是完整、健壮的实现方案：

✅ 关键修改点

1. 监听菜单项点击：使用 event.target.matches('https://www./link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a') 判断是否点击了下拉中的链接；
2. 更新按钮文本：通过 document.querySelector('.dropbtn').innerText = event.target.innerText 动态设置按钮显示内容；
3. 自动收起菜单：调用 myDropdown.classList.remove('show')（注意：需先获取 DOM 引用）；
4. 避免重复触发：确保点击按钮本身（.dropbtn）不触发选中逻辑（仅用于展开/收起）。

✅ 优化后的 JavaScript（推荐写法）

function dropdownMenu() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 获取下拉容器引用，提升性能
const myDropdown = document.getElementById("myDropdown");
const dropbtn = document.querySelector(".dropbtn");

window.onclick = function (event) {
  // 点击下拉项：更新按钮文本 + 收起菜单
  if (event.target.matches("https://www./link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a")) {
    dropbtn.innerText = event.target.textContent.trim();
    myDropdown.classList.remove("show");
    return; // 提前退出，避免后续逻辑干扰
  }

  // 点击非按钮、非下拉项区域 → 收起所有下拉菜单
  if (!event.target.matches('.dropbtn') && !event.target.closest('.dropdown-content')) {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      dropdowns[i].classList.remove("show");
    }
  }
};

✅ HTML 结构（保持不变，语义清晰）

ACTIVE

  ONE
  TWO
  THREE

⚠️ 注意事项

• 避免 href="https://www./link/93ac0c50dd620dc7b88e5fe05c70e15b" 导致页面跳转：若需禁用默认跳转行为，可在 上添加 onclick="return false;"，或在 JS 中调用 event.preventDefault()（本例中因仅读取文本且无跳转需求，可省略）；
• 空格与换行处理：使用 .textContent.trim() 替代 .innerText 更可靠（兼容性更好，且自动去除前后空白）；
• 多下拉菜单支持：当前代码已适配多个 .dropdown-content 实例（通过循环移除 show 类），适合复用；
• 无障碍建议：如需提升可访问性，可为按钮添加 aria-haspopup="true" 和 aria-expanded 属性，并在 JS 中同步更新。

✅ 效果总结

✅ 点击按钮 → 展开下拉列表
✅ 点击任意 项 → 文本立即显示在按钮上，菜单自动收起
✅ 点击页面其他区域 → 所有下拉菜单关闭
✅ 完全保留 CSS 自定义样式，不受 原生限制

该方案兼顾功能完整性、代码可维护性与视觉可控性，是构建专业级自定义下拉选择器的推荐实践。