本文介绍如何将原生 html 下拉菜单（`
要让下拉菜单具备“可选中并反馈当前选择”的能力，关键在于：将原本仅用于触发展开的按钮（.dropbtn）转变为动态显示所选内容的“伪选中控件”，同时为每个 <a> 选项绑定点击响应逻辑，使其在被点击时不仅关闭菜单，还能将自身文本同步到按钮上。
以下是完整、健壮的实现方案：
✅ 核心 JavaScript 改进点
原始代码中 window.onclick 仅处理菜单收起逻辑，未区分点击目标类型。我们需增强判断逻辑，精准捕获对下拉项（https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a）的点击，并执行两步操作：
- 关闭下拉面板（移除 .show 类）；
- 更新按钮文本为被点击链接的内容。
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("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a")) {
dropdown.classList.remove("show");
dropbtn.textContent = event.target.textContent.trim(); // 安全获取并更新文本
}
// 点击了非按钮、非下拉项区域 → 收起菜单
else if (!event.target.matches('.dropbtn') && !dropdown.contains(event.target)) {
dropdown.classList.remove("show");
}
};? 注意：使用 event.target.matches("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a") 比 event.target.parentNode === dropdown 更可靠，避免因嵌套结构或空格文本节点导致匹配失败；trim() 可防止前后空白符影响显示。
✅ HTML 结构优化建议（增强可访问性）
为提升语义与无障碍支持，推荐将 <button> 替换为 <div role="button"> 或保留 <button> 并添加 aria-haspopup="true" 和 aria-expanded 属性，实现动态状态同步：
<button onclick="dropdownMenu()" class="dropbtn" aria-haspopup="true" aria-expanded="false" id="dropdownTrigger" > ACTIVE </button> <div id="myDropdown" class="dropdown-content" role="menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" role="menuitem">ONE</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" role="menuitem">TWO</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" role="menuitem">THREE</a> </div>
并在 JS 中同步 aria-expanded 状态：
function dropdownMenu() {
const dropdown = document.getElementById("myDropdown");
const trigger = document.getElementById("dropdownTrigger");
const isShown = dropdown.classList.contains("show");
dropdown.classList.toggle("show");
trigger.setAttribute("aria-expanded", !isShown);
}✅ CSS 补充：高亮已选中项（可选增强）
虽然当前设计不保留菜单内高亮，但若需视觉强化“已选”概念，可在 JS 中为被点击项临时添加 .active 类（需配合 CSS）：
if (event.target.matches("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyDropdown a")) {
// 清除之前所有 active 状态
dropdown.querySelectorAll("a.active").forEach(el => el.classList.remove("active"));
// 设置当前项为 active
event.target.classList.add("active");
dropdown.classList.remove("show");
dropbtn.textContent = event.target.textContent.trim();
}对应 CSS：
.dropdown-content a.active {
background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bE6F7FF;
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1890FF;
font-weight: 500;
}✅ 总结
- ✅ 不依赖 <select>，完全掌控样式与交互；
- ✅ 点击任意 <a> 即完成“选择 + 显示更新 + 自动收起”三合一操作；
- ✅ 兼容键盘导航（可配合 Tab + Enter 进一步扩展）；
- ✅ 通过 aria-* 属性保障基础可访问性；
- ⚠️ 注意避免内联 onclick 与全局 window.onclick 冲突，生产环境建议统一使用 addEventListener。
该方案兼顾灵活性、可维护性与用户体验，是构建定制化下拉选择器的轻量级最佳实践。
