为何按钮仅在每两次点击时才触发旋转效果？

你这个旋转效果异常的核心问题是用了两个独立的CSS类+分别执行toggle操作，逻辑冲突导致了循环异常：

• 点击1：给元素添加rotate-180类，旋转180度，isRotated设为true
• 点击2：给元素添加rotate-180back类，此时元素同时拥有两个旋转类，CSS中rotate-180back的transform: rotate(0deg)会覆盖前者，看起来是转回原位，isRotated设为false
• 点击3：执行toggleClass("rotate-180")，但元素已经有这个类，所以会移除它，现在只剩rotate-180back类，保持0度无变化
• 点击4：执行toggleClass("rotate-180back")，移除这个类，元素没有任何旋转类，还是0度无变化
• 点击5：重新添加rotate-180类，回到180度，开始重复循环

方案一：只用一个CSS类，简化toggle逻辑 #

保留核心状态判断，旋转逻辑复用同一个类即可：

修改后的CSS #

.rotate-180 {
  transform: rotate(180deg);
}
/* 不需要rotate-180back类，元素默认状态就是rotate(0deg) */

修改后的JS #

let isRotated = false;

$(".buttonLayout").on("click", function() {
  var classTohide = ".classToHide";

  if (!isRotated) {
    $(classTohide).hide()
    isRotated = true
  } else {
    $(classTohide).show()
    isRotated = false
  }
  // 每次点击统一切换同一个旋转类
  $(this).toggleClass("rotate-180");
});

方案二：保留两个类，用明确的增删类替代toggle #

如果一定要保留两个独立的旋转类，不要用toggle，而是明确添加目标类并移除另一个类：

修改后的JS #

let isRotated = false;

$(".buttonLayout").on("click", function() {
  var classTohide = ".classToHide";
  const $btn = $(this);

  if (!isRotated) {
    $(classTohide).hide()
    isRotated = true
    $btn.addClass("rotate-180").removeClass("rotate-180back");
  } else {
    $(classTohide).show()
    isRotated = false
    $btn.addClass("rotate-180back").removeClass("rotate-180");
  }
});

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