如何阻止子菜单切换文本点击后出现选中高亮的问题

嗨，我来帮你搞定这个困扰！你遇到的是浏览器自带的文本选中行为——连续点击三次（或者快速多次点击）元素时，浏览器会默认选中该元素内的文本，这确实和专业网站的体验不符。下面给你几个简单高效的解决方案，挑一个适合你的就行：

方法一：用CSS直接禁用文本选择（最推荐） #

这是最简单的方案，不需要修改JavaScript代码，直接给你的.toggle类加上禁用文本选择的样式就行。如果你的切换文本是在<a>标签里，样式会自动继承给子元素：

/* 禁用.toggle元素及其子元素的文本选中 */
.toggle {
  user-select: none;
  /* 兼容旧版浏览器的前缀（可选） */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

这个属性会完全阻止用户选中该元素内的文本，不管怎么点击都不会出现高亮，完美解决你的问题，而且兼容性非常好（现代浏览器+IE10及以上都支持）。

方法二：在JavaScript事件里阻止默认行为 #

如果你更倾向于用JS解决，可以在点击事件中阻止浏览器的默认行为——因为文本选中属于点击事件的默认行为之一，我们直接取消它就行：

修改你的JavaScript代码，在事件处理函数里加入event.preventDefault()：

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

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

  toggle.addEventListener('click', (event) => {
    // 阻止浏览器默认的文本选中行为
    event.preventDefault();
    
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
});

⚠️ 注意：如果你的<a>标签本来需要跳转功能，这个方法会阻止跳转，所以只适合<a>仅作为触发按钮、不需要跳转的场景。

方法三：监听mousedown事件阻止选中 #

还有一种更精准的方式——因为文本选中是从mousedown事件开始的，我们可以监听这个事件并阻止默认行为，这样既不会影响点击事件的逻辑，也能避免文本选中：

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

  // 阻止mousedown的默认行为，避免文本选中
  toggle.addEventListener('mousedown', (event) => {
    event.preventDefault();
  });

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

这个方法适合需要保留<a>标签默认行为（比如右键菜单）但又要禁止文本选中的场景。

备注：内容来源于stack exchange，提问作者Kang Kong