本文介绍如何将静态下拉菜单升级为可交互的选择式组件，使用户点击 `` 选项后，自动关闭菜单并将选中项文本同步显示在触发按钮上，同时保持完全自定义的样式控制。
要实现「点击下拉项即设为当前选中，并更新按钮显示文本」的效果，核心在于：拦截对下拉项（<a>）的点击事件，提取其文本内容，赋值给按钮，并收起菜单。原代码仅处理了“点击外部区域收起菜单”，但未响应菜单项的点击逻辑。我们需增强 window.onclick 监听器，精准识别并处理 <a> 元素的点击。
以下是完整、健壮的实现方案：
✅ 关键修改点
- 监听菜单项点击：使用 event.target.matches('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a') 判断是否点击了下拉中的链接；
- 更新按钮文本：通过 document.querySelector('.dropbtn').innerText = event.target.innerText 动态设置按钮显示内容；
- 自动收起菜单：调用 myDropdown.classList.remove('show')（注意：需先获取 DOM 引用）；
- 避免重复触发：确保点击按钮本身（.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.php.cn/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 结构（保持不变，语义清晰）
<button onclick="dropdownMenu()" class="dropbtn">ACTIVE</button> <div id="myDropdown" class="dropdown-content"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">ONE</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">TWO</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">THREE</a> </div>
⚠️ 注意事项
- 避免 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 导致页面跳转：若需禁用默认跳转行为，可在 <a> 上添加 onclick="return false;"，或在 JS 中调用 event.preventDefault()（本例中因仅读取文本且无跳转需求，可省略）；
- 空格与换行处理：使用 .textContent.trim() 替代 .innerText 更可靠（兼容性更好，且自动去除前后空白）；
- 多下拉菜单支持：当前代码已适配多个 .dropdown-content 实例（通过循环移除 show 类），适合复用；
- 无障碍建议：如需提升可访问性，可为按钮添加 aria-haspopup="true" 和 aria-expanded 属性，并在 JS 中同步更新。
✅ 效果总结
✅ 点击按钮 → 展开下拉列表
✅ 点击任意 <a> 项 → 文本立即显示在按钮上，菜单自动收起
✅ 点击页面其他区域 → 所有下拉菜单关闭
✅ 完全保留 CSS 自定义样式，不受 <select> 原生限制
该方案兼顾功能完整性、代码可维护性与视觉可控性，是构建专业级自定义下拉选择器的推荐实践。
