点击下拉菜单切换按钮时出现文本高亮（尤其是连续点击后），是因使用 <a> 标签触发了浏览器默认的焦点高亮行为；改用语义化且可完全控制样式的 <button> 元素，并配合 CSS 移除 outline，即可彻底解决。
点击下拉菜单切换按钮时出现文本高亮（尤其是连续点击后），是因使用 `` 标签触发了浏览器默认的焦点高亮行为；改用语义化且可完全控制样式的 `
在构建可折叠子菜单时，常见误区是将切换控件写成 <a> 标签（如 <a>Fit</a>）。虽然它能响应点击，但 <a> 作为超链接元素，在获得焦点（例如通过鼠标点击或键盘 Tab 导航）时，浏览器会默认显示 outline 或高亮效果——这正是你观察到“每三次点击后高亮”的原因：实际是焦点反复获取与释放导致的视觉反馈，而非 JavaScript 逻辑问题。
✅ 正确做法是改用 <button> 元素：
- 语义更准确（触发交互行为，非跳转）；
- 默认无 href，不会触发页面跳转或历史记录变更；
- 可通过 CSS 完全控制焦点样式，避免干扰 UI。
以下是优化后的完整实现：
HTML 结构（推荐）：
<div class="accordion-item">
<button class="toggle" type="button">Fit</button>
<div class="content">
<div class="wrapper-content">
<p>test1</p>
<p>test2</p>
</div>
</div>
</div>关键 CSS（消除默认高亮并保持可访问性）：
.toggle {
background: none;
border: none;
padding: 8px 12px;
font: inherit;
cursor: pointer;
text-align: left;
width: 100%;
/* 移除焦点高亮，但保留键盘导航可见性 */
outline: none;
}
/* 为键盘用户保留可感知的焦点样式（推荐） */
.toggle:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* 可选：添加 hover / active 状态提升体验 */
.toggle:hover {
background-color: #f8f9fa;
}
.toggle:active {
opacity: 0.8;
}JavaScript（保持原有逻辑，增强健壮性）：
const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(toggle => {
const content = toggle.nextElementSibling;
toggle.addEventListener('click', () => {
// 使用 getComputedStyle 更可靠地判断当前状态
const isShown = window.getComputedStyle(content).display === 'block';
content.style.display = isShown ? 'none' : 'block';
});
});⚠️ 注意事项：
- 始终为 <button> 添加 type="button"，避免表单提交意外行为；
- 不要全局禁用 outline: none 而不提供替代焦点指示——这会损害键盘用户的可访问性；
- 如需更高可访问性，建议为 .toggle 添加 aria-expanded 和 aria-controls 属性，并动态同步状态；
- 推荐用 CSS max-height + transition 替代 display: none/block 实现平滑展开动画，提升用户体验。
通过语义化重构与精细化样式控制，你的子菜单将既专业稳定，又符合现代 Web 可访问性标准。
