本文讲解如何通过语义化 html 和 css 样式优化，彻底避免点击折叠/展开按钮时出现文本高亮（selection highlight）问题，提升交互专业性。
本文讲解如何通过语义化 html 和 css 样式优化，彻底避免点击折叠/展开按钮时出现文本高亮（selection highlight）问题，提升交互专业性。
在构建可折叠的子菜单（如“Fit”展开区）时，若使用 标签作为触发按钮，即使未设置 href，浏览器仍可能将其视为可选中文本节点——尤其在快速连续点击时，容易触发系统级文本选中行为（表现为浅蓝色背景+文字高亮），影响 UI 一致性与用户体验。这不是 JavaScript 逻辑缺陷，而是 HTML 语义与默认样式共同作用的结果。
根本解决方案：改用
首先，将语义不匹配的 替换为语义正确、行为可控的
<div>
<button class="toggle">Fit</button>
<div class="content">
<div class="wrapper-content">
<p>test1</p>
<p>test2</p>
</div>
</div>
</div>
JavaScript 逻辑无需修改，仍可沿用原代码（但建议升级为更健壮的 classList.toggle() 写法）：
const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach((toggle) => {
const content = toggle.nextElementSibling;
toggle.addEventListener('click', () => {
// 推荐写法：使用 class 控制显示，而非内联 style
content.classList.toggle('is-expanded');
});
});
同时，在 CSS 中定义 .content.is-expanded 并禁用用户选中（防高亮）：
.content {
display: none;
}
.content.is-expanded {
display: block;
}
/* 关键：防止按钮内文本被意外选中 */
.toggle {
user-select: none; /* 标准语法 */
-webkit-user-select: none; /* Safari / Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
border: none;
background: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: none; /* 移除聚焦虚线框（可按需保留或美化） */
}
✅ 为什么更专业？
- user-select: none 彻底屏蔽鼠标拖选与双击选中，消除所有平台下的高亮残留；
- 使用 classList 而非 style.display，便于统一维护样式、支持 CSS 过渡动画（如 max-height + overflow-hidden 实现平滑展开）。
⚠️ 注意事项：
- 切勿为
- 若需键盘可访问性（如回车/空格触发），
- 如需保留链接语义（例如跳转到锚点），应使用 + preventDefault()，并显式设置 role="button" 和 tabindex="0"，但本场景推荐优先选用
通过这一组合优化，你的折叠菜单将完全对齐主流产品体验——点击干净利落，无闪烁、无高亮、无障碍。
