如何防止下拉菜单切换按钮被意外高亮-js教程-PHP中文网

点击下拉菜单切换按钮时出现文本高亮（尤其是连续点击后），是因使用标签触发了浏览器默认的焦点高亮行为；改用语义化且可完全控制样式的元素，并配合 CSS 移除 outline，即可彻底解决。

点击下拉菜单切换按钮时出现文本高亮（尤其是连续点击后），是因使用 `` 标签触发了浏览器默认的焦点高亮行为；改用语义化且可完全控制样式的 `

在构建可折叠子菜单时，常见误区是将切换控件写成标签（如 Fit）。虽然它能响应点击，但作为超链接元素，在获得焦点（例如通过鼠标点击或键盘 Tab 导航）时，浏览器会默认显示 outline 或高亮效果——这正是你观察到“每三次点击后高亮”的原因：实际是焦点反复获取与释放导致的视觉反馈，而非 JavaScript 逻辑问题。

✅ 正确做法是改用

语义更准确（触发交互行为，非跳转）；
默认无 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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/2360" title="Google AI Studio"><img
														src="https://img.php.cn/upload/ai_manual/001/246/273/176136243620160.png" alt="Google AI Studio" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2360" title="Google AI Studio" class="overflowclass">Google AI Studio</a>
													<p class="overflowclass">一款AI开发辅助工具，主要用于Google 推出的基于浏览器的集成开发环境，适合需要提升相关任务效率的用户。</p>
												</div>
												<a rel="nofollow" href="/ai/2360" title="Google AI Studio" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      <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';
  });
});

⚠️ 注意事项：