本文介绍如何将静态下拉菜单升级为可交互的选择组件：点击 `` 选项后，自动关闭菜单、更新按钮显示文本，并支持视觉反馈，无需替换为原生 `
要让下拉菜单真正“可选”，关键在于捕获用户对菜单项（<a>）的点击事件，并将其内容同步到触发按钮上，同时关闭下拉面板。原始代码仅处理了展开/收起逻辑，但未响应选项点击——我们需要增强 window.onclick 监听器，使其识别并处理菜单项点击。
✅ 核心改进点
- 监听菜单项点击：使用 event.target.matches('#myDropdown a') 精准捕获 <a> 元素点击；
- 更新按钮文本：通过 document.querySelector('.dropbtn').innerText = event.target.innerText 动态设置按钮显示内容；
- 自动收起菜单：点击后立即移除 .show 类，避免手动关闭；
- 保留原有样式与结构：完全复用现有 HTML/CSS，零侵入式升级。
? 修改后的完整 JavaScript（含健壮性优化）
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
const dropdown = document.getElementById("myDropdown");
const dropbtn = document.querySelector(".dropbtn");
// 点击菜单项：更新按钮文本 + 收起菜单
if (event.target.matches("#myDropdown a")) {
dropbtn.textContent = event.target.textContent.trim();
dropdown.classList.remove("show");
return;
}
// 点击非触发按钮区域：收起所有下拉菜单
if (!event.target.matches('.dropbtn') && !dropdown.contains(event.target)) {
const dropdowns = document.getElementsByClassName("dropdown-content");
for (let i = 0; i < dropdowns.length; i++) {
dropdowns[i].classList.remove("show");
}
}
}? 注意：textContent 比 innerText 更可靠（兼容性好、不触发重排），且 .trim() 可清除潜在空格，确保显示整洁。
? 可选增强：视觉反馈（高亮已选项）
若需进一步体现“已选中”状态，可在 CSS 中添加激活样式：
/* 为已选中的菜单项添加临时高亮（可选） */
.dropdown-content a.active {
background-color: #E6F7FF !important;
color: #1890FF;
font-weight: 500;
}并在 JS 中同步添加/移除 active 类：
// 替换原更新逻辑部分：
const links = dropdown.querySelectorAll("a");
links.forEach(link => link.classList.remove("active"));
event.target.classList.add("active");✅ 最终效果验证
- 初始按钮显示 ACTIVE；
- 点击 ONE → 按钮变为 ONE，菜单收起；
- 再次点击按钮 → 菜单重新展开，之前选中的 ONE 可按需高亮；
- 点击页面任意空白处 → 菜单自动关闭，按钮文本保持不变。
该方案兼顾语义清晰、样式可控与交互自然，是自定义下拉选择器的经典实践，适用于表单筛选、主题切换、语言选择等场景。
