jQuery toggleClass移动端失效：锚点元素点击切换样式异常

这问题我碰到过好几次！核心原因大概率是你误用了CSS伪类（比如:active/:hover）来实现状态切换，或者JS逻辑里没正确维护切换状态，再加上锚点的默认跳转行为干扰，才导致移动端第二次点击无效、桌面端需移开鼠标才切换的怪异表现。下面给你两个靠谱的解决方案：

方案1：纯CSS复选框Hack（适合简单场景） #

利用隐藏复选框的checked状态作为开关，完全避开伪类的状态陷阱，跨端表现一致：

<!-- 隐藏的复选框作为状态开关 -->
<input type="checkbox" id="color-toggle" style="display: none;">
<!-- 用标签关联复选框，点击标签就相当于操作复选框 -->
<label for="color-toggle" class="toggle-anchor">点击切换Hello颜色</label>
<div class="hello">Hello</div>

<style>
.hello {
  color: red; /* 初始红色 */
  transition: color 0.2s; /* 可选：添加平滑过渡动画 */
}

/* 复选框选中时，控制Hello的颜色 */
#color-toggle:checked + .toggle-anchor + .hello {
  color: black; /* 切换后的黑色 */
}

/* 给标签加点击反馈，让用户知道这是可点击元素 */
.toggle-anchor {
  cursor: pointer;
  text-decoration: underline;
  color: #0066cc;
}
</style>

为什么这个方案有效？ #

复选框的checked状态是明确的二元开关，点击标签会直接切换这个状态，不受移动端:active持续、桌面端:hover依赖鼠标位置的影响，完全避免了伪类的状态问题。

方案2：JavaScript方案（适合复杂交互场景） #

通过维护一个状态变量，每次点击时主动切换颜色，同时阻止锚点的默认跳转行为，确保逻辑可控：

<a href="#" class="toggle-anchor">点击切换Hello颜色</a>
<div class="hello">Hello</div>

<style>
.hello {
  color: red;
  transition: color 0.2s;
}

.toggle-anchor {
  cursor: pointer;
  color: #0066cc;
}
</style>

<script>
const toggleAnchor = document.querySelector('.toggle-anchor');
const helloText = document.querySelector('.hello');
let isOriginalColor = true; // 记录当前是否为初始红色

toggleAnchor.addEventListener('click', (e) => {
  // 阻止锚点默认的跳转行为（比如跳转到页面顶部），避免干扰状态切换
  e.preventDefault();
  
  if (isOriginalColor) {
    helloText.style.color = 'black';
  } else {
    helloText.style.color = 'red';
  }
  // 切换状态变量
  isOriginalColor = !isOriginalColor;
});
</script>

关键注意点： #

• 一定要调用e.preventDefault()阻止锚点的默认跳转，否则点击<a href="#">会导致页面滚动，可能让你误以为状态切换没生效。
• 用状态变量isOriginalColor明确记录当前颜色状态，每次点击都基于这个状态做切换，逻辑清晰可靠。

为什么你之前的写法会出问题？ #

如果是用:active伪类来控制颜色：

• 移动端浏览器为了提升点击体验，会让元素的:active状态持续到用户点击其他区域，所以第二次点击锚点时，它还处于:active状态，颜色不会切换。
• 桌面端的:hover伪类只有鼠标悬停在元素上时生效，移开鼠标才会取消，所以必须移开鼠标才能看到颜色恢复。

这种依赖伪类的方式根本不适合做“点击切换”的交互，必须用明确的状态开关（复选框或JS变量）来实现。

内容的提问来源于stack exchange，提问作者usb2018