如何为下拉菜单选项添加单选式对勾标记（仅高亮当前选中项）

本文详解如何通过 javascript 动态管理 css 类，实现下拉菜单中“仅一个选项显示 ✓ 对勾”的单选效果：默认首项已选，点击其他项时自动移除旧对勾、添加新对勾，并同步更新按钮文本。

要实现「仅当前选中项显示对勾、其余项清除对勾」的单选交互效果，关键在于统一管理所有选项的 .checked 类状态，而非为每个元素单独绑定重复逻辑。原始代码存在两个核心问题：

1. event.target.classList.add('checked').innerText 语法错误（.add() 返回 undefined，无法链式调用 .innerText）；
2. 点击事件中未清除其他选项的 .checked 类，导致对勾持续累积。

✅ 正确实现步骤

1. 初始化默认选中状态

在 HTML 加载完成时，为首个 元素（即 .a）添加 .checked 类，确保页面首次渲染即有对勾：

ACTIVE

? 提示：也可在 JS 中通过 document.querySelector('.a').classList.add('checked') 动态设置，增强可维护性。

2. 统一绑定点击事件并重置状态

使用事件委托或批量监听，确保每次点击只激活目标项、清除其余项：

window.addEventListener('click', function(event) {
  // 检测是否点击了下拉菜单中的选项
  if (event.target.matches('#myDropdownCity a')) {
    const dropdown = document.getElementById('myDropdownCity');
    const button = document.querySelector('.dropbtnCity');
    const allLinks = dropdown.querySelectorAll('a'); // 获取全部选项

    // 关闭下拉菜单
    dropdown.classList.remove('showCity');

    // 更新按钮文字
    button.innerText = event.target.innerText;

    // 清除所有选项的 .checked 类
    allLinks.forEach(link => link.classList.remove('checked'));

    // 仅为目标项添加 .checked 类
    event.target.classList.add('checked');
  }
});

3. 确保 CSS 对勾样式生效

.checked::after 伪元素需满足以下条件才能正确显示：

• 目标元素必须是 position: relative 或 static（避免被 position: absolute 的父容器裁剪）；
• content 属性必须存在且非空；
• 建议显式设置 position: relative 以保障定位稳定性：

.dropdown-contentCity a {
  position: relative; /* 关键：确保 ::after 可相对定位 */
  /* ... 其他原有样式 */
}

.checked::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #4CAF50;
  font-weight: bold;
}

4. 完整优化后的 JS（含防错处理）

function dropdownCity() {
  document.getElementById("myDropdownCity").classList.toggle("showCity");
}

// 页面加载后初始化默认选中
document.addEventListener('DOMContentLoaded', () => {
  const firstLink = document.querySelector('#myDropdownCity a');
  if (firstLink) firstLink.classList.add('checked');
});

window.addEventListener('click', function(event) {
  const target = event.target;
  if (target.matches('#myDropdownCity a')) {
    const dropdown = document.getElementById('myDropdownCity');
    const button = document.querySelector('.dropbtnCity');

    // 关闭菜单 & 更新按钮文本
    dropdown.classList.remove('showCity');
    button.innerText = target.innerText;

    // 批量清理 + 单独激活
    document.querySelectorAll('#myDropdownCity a').forEach(el => 
      el.classList.toggle('checked', el === target)
    );
  }
});

⚠️ 注意事项

• 避免重复绑定：原答案中在 click 回调内再次为每个 a 添加 click 监听器，会导致事件重复注册（点击多次后对勾逻辑紊乱），应直接操作 event.target；
• DOM 查询性能：使用 querySelectorAll 一次性获取全部链接，比多次 querySelector 更高效；
• 可访问性补充：建议为 .checked 项添加 aria-current="true" 属性，提升屏幕阅读器兼容性。

通过以上结构化处理，即可稳定实现专业级单选对勾交互——简洁、健壮、易扩展。