jQuery click事件addClass生效二次点击removeClass失效问题

安全阿岳

2026-8-28

问题根因

你为.call-us-button .call元素绑定了两个触发时机完全一致的click事件监听器。元素被点击时，两个监听器会按绑定顺序先后执行：先执行淡入内容、添加callBtnActive类的逻辑，紧接着立刻执行淡出内容、移除callBtnActive类的逻辑，最终表现就是永远看不到移除类对应的交互效果，看起来只有addClass逻辑生效。

修复代码

两种实现方式都可以，推荐第一种更简洁：

方式1：直接使用jQuery自带的切换方法

fadeToggle()会自动匹配元素当前显示状态执行淡入/淡出，toggleClass()会自动判断类名是否存在执行添加/移除，不需要手动写分支判断：

(function ($) {
  $(".call-us-button .call").on("click", function () {
    // 提前缓存父元素jQuery对象，减少重复DOM查询
    const $parentWrap = $(this).parent();
    $parentWrap.find(".phone-number").fadeToggle();
    $parentWrap.find(".qr-code-call").fadeToggle();
    $parentWrap.toggleClass("callBtnActive");
  });
})(jQuery);

方式2：手动判断类状态执行对应逻辑

如果后续需要在激活/未激活状态加更多差异化逻辑，可以手动判断当前类名状态走分支：

(function ($) {
  $(".call-us-button .call").on("click", function () {
    const $parentWrap = $(this).parent();
    if ($parentWrap.hasClass("callBtnActive")) {
      // 已激活状态下点击：执行关闭逻辑
      $parentWrap.find(".phone-number").fadeOut();
      $parentWrap.find(".qr-code-call").fadeOut();
      $parentWrap.removeClass("callBtnActive");
    } else {
      // 未激活状态下点击：执行展开逻辑
      $parentWrap.find(".phone-number").fadeIn();
      $parentWrap.find(".qr-code-call").fadeIn();
      $parentWrap.addClass("callBtnActive");
    }
  });
})(jQuery);

优化提示