如何防止点击子菜单切换按钮时出现文本高亮-html教程-PHP中文网

如何防止点击子菜单切换按钮时出现文本高亮

点击子菜单切换元素时意外出现的文本高亮，通常源于标签默认的可选中/聚焦行为；改用语义化并配合 CSS 去除默认焦点样式，即可彻底解决该问题。

点击子菜单切换元素时意外出现的文本高亮，通常源于 `` 标签默认的可选中/聚焦行为；改用语义化 `

在构建可访问、专业级的折叠式子菜单（accordion-style submenu）时，视觉干扰（如点击后文字被蓝色虚线框包围或背景变蓝）不仅影响用户体验，还暴露了语义与交互设计的不严谨。根本原因在于：你当前使用的是标签（Fit），而在无 href 属性时虽能触发点击，但浏览器仍将其视为可聚焦元素，并在点击时激活 :focus 状态——尤其在连续快速点击时，会因焦点保留而触发系统级文本高亮（常见于 macOS Safari / Chrome 的“按下并拖动选择”误触发，或 Windows 下的焦点轮廓叠加）。

✅ 正确做法是：用，因其原生语义即为“触发操作”，且默认具备无障碍支持（role="button"、键盘可聚焦/空格/回车触发），同时更易通过 CSS 控制焦点表现。

以下是优化后的完整实现：

<div class="submenu">
  <button class="toggle" type="button">Fit</button>
  <div class="content">
    <div class="wrapper-content">
      <p>test1</p>
      <p>test2</p>
    </div>
  </div>
</div>

const toggleElements = document.querySelectorAll('.toggle');

toggleElements.forEach(toggle => {
  const content = toggle.nextElementSibling;

  toggle.addEventListener('click', () => {
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  });
});

? 关键增强建议（提升健壮性与可访问性）：

添加 type="button"：防止表单上下文中意外提交；

使用 aria-expanded 和 aria-controls 提升屏幕阅读器支持：

<button class="toggle" type="button" aria-expanded="false" aria-controls="content-1">Fit</button>
<div id="content-1" class="content" hidden>
<p>并在 JS 中同步更新状态：</p>
<pre class="brush:php;toolbar:false;">toggle.setAttribute('aria-expanded', content.style.display === 'block');

通过 CSS 移除默认焦点轮廓（如需完全自定义）：

.toggle:focus {
  outline: none; /* 或使用更友好的替代方案，如 focus-visible */
}
/* 推荐：仅在键盘聚焦时显示轮廓，兼顾可访问性 */
.toggle:focus:not(:focus-visible) {
  outline: none;
}
.toggle:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

⚠️ 注意：避免直接依赖 style.display 判断状态（易受内联样式干扰）。进阶方案推荐使用 CSS 类控制显隐（如 .content--open），结合 getComputedStyle() 或 classList.toggle() 实现更可靠的 DOM 状态管理。

综上，将替换为