如何用jQuery实现同一选择器点击循环执行不同动作？

嘿，作为jQuery新手遇到这种循环逻辑的问题很正常，我来帮你理清思路！你需要的是一个状态追踪机制，用来记录当前点击处于第几次，然后对应执行不同的动作，实现1→2→1→2...的循环。

下面给你两种实用的解决方案，你可以根据需求选择：

方法一：用计数器追踪点击次数 #

这种方式直观易懂，适合新手理解逻辑：

// 初始化一个计数器，记录点击次数
let clickCounter = 0;

$('.menu').click(function() {
  // 每次点击计数器加1
  clickCounter++;
  
  // 判断当前是奇数次还是偶数次点击
  if (clickCounter % 2 === 1) {
    // 第1、3、5...次点击：执行第一个动作
    $(".dropleft").css("bottom", "0vh");
    $(this).css("transform", "rotate(90deg)");
  } else {
    // 第2、4、6...次点击：执行第二个动作（这里补全你没写完的代码，假设是恢复初始状态）
    $(".dropleft").css("bottom", "-100vh");
    $(this).css("transform", "rotate(0deg)");
  }
});

原理很简单：每次点击后计数器加1，用% 2（取余）判断当前是奇数还是偶数次点击，奇数对应第一个动作，偶数对应第二个动作，这样第三次点击时计数器是3，3%2=1，就会回到第一个动作，完美实现循环。

方法二：用toggleClass实现（更推荐） #

这种方法把样式和逻辑分离，更符合前端开发的最佳实践，代码也更简洁：

首先在CSS里定义好激活状态的样式：

/* 菜单激活时的样式 */
.menu.active {
  transform: rotate(90deg);
}

/* 下拉栏激活时的样式 */
.dropleft.active {
  bottom: 0vh;
}

然后JS代码只需要切换类名即可：

$('.menu').click(function() {
  // 切换自身的active类
  $(this).toggleClass('active');
  // 同时切换dropleft的active类
  $(".dropleft").toggleClass('active');
});

toggleClass会自动判断元素是否有这个类：第一次点击添加类（执行第一个动作的样式），第二次点击移除类（回到初始样式，也就是你的第二个动作），第三次点击又添加类，以此循环，完全满足你的需求！而且把样式放在CSS里，后续修改样式会更方便，不用动JS代码。

如果你原来的第二个动作不是恢复初始状态，而是其他自定义样式，只需要调整CSS或者在toggle的时候做额外判断就行，灵活度很高。

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