Javascript 在同一选择器（jquery）上一个接一个的操作

我不知道怎么弄清楚。我有一个选择器，有两个动作：

1） 如果单击，我希望运行第一个操作。 2） 如果第一次单击，则第二次单击对象应运行第二次操作。 3） 如果已单击第二个按钮，请返回步骤1）

我是Jquery新手。够清楚吗

//第一个动作
$（'.menu'）。单击（函数（）{
$（“.dropleft”）.css（“底部”、“0vh”）；
$（this.css（“变换”、“旋转（90度）”）；
});
//第二行动
$（'.menu'）。单击（函数（）{
$（“.dropleft”）.css（“底部”和“）；
$（this.css（“transform”，”）；
});您可以传递一个IIFE，该IIFE返回一个函数，该函数将保持对单击处理程序的切换：

// 1st action
$('.menu').click((function(toggleValue){
  return function(e){
      if(toggleValue){//first action
        $(".dropleft").css("bottom","0vh");
        $(this).css("transform","rotate(90deg)");      
      }else{//second action
        $(".dropleft").css("bottom","");
        $(this).css("transform","");      
      }
      toggleValue = !toggleValue;//toggle
  }
})(true)/** IIFE */);

至于卡尔的评论,；如果有多个。菜单元素，则可以在元素上设置用户定义的属性：

// 1st action
$('.menu').click(function(e){
  toggleValue=e.target.getAttribute("data-toggle");
  if(toggleValue!=="toggle"){//first action
    $(".dropleft").css("bottom","0vh");
    $(this).css("transform","rotate(90deg)");
    e.target.setAttribute("data-toggle","toggle");
  }else{//second action
    $(".dropleft").css("bottom","");
    $(this).css("transform","");      
    e.target.setAttribute("data-toggle","next");
  }
  toggleValue = !toggleValue;//toggle
});

使用单个事件处理程序，并使用以下方式存储标志：


$（“.menu”）
。单击（函数（）{
var$菜单=$（此）；
var active=$menu.data（'active'）；
var$dropleft=$menu.sides（“.dropleft”）；
如果（活动）{
$dropleft.css（“颜色”，“颜色”）；
$menu.css（“transform”，“transform”）；
}否则{
$dropleft.css（“颜色”、“红色”）；
$menu.css（“变换”、“旋转（90度）”）；
}
$menu.data（'active'，！active））；
});

菜单1
液滴1
菜单2
液滴2
我建议使用CSS类和jQuery的
切换类
函数。不那么复杂，更易于维护

CSS:

JS:

您可以检查一些css属性


$（'.menu'）。单击（函数（）{
const transform=$（this.css（“transform”）；
如果（变换）{
$（“.dropleft”）.css（“底部”和“）；
$（this.css（“transform”，”）；
}否则{
$（“.dropleft”）.css（“底部”、“0vh”）；
$（this.css（“变换”、“旋转（90度）”）；
}
});当您在菜单类中单击时，您正在设置要执行的两个函数

您应该只创建一个函数并控制应该执行的内容

以下是一个例子：


var控制=false；
$（'.menu'）。单击（函数（）{
如果（控制=！控制）{
$（“.dropleft”）.css（“底部”、“0”）；
$（this.css（“变换”、“旋转（90度）”）；
}否则{
$（“.dropleft”）.css（“底部”和“）；
$（this.css（“transform”，”）；
}
});
菜单{
宽度：100px；
高度：50px；
背景：绿色；
}
.液滴{
宽度：100px；
高度：50px；
立场：绝对；
左：0；
背景：红色；
}

菜单
@Karl AndréGagnon很好的观点，不，不是每个都有。菜单需要自己的。你可以做
$（'.menu'）。每个
向每个
添加一个侦听器。menu
更新的回答仍然，我喜欢这种生活方式。每个
都会困扰我，但对于单个元素来说，这是一个很好的方法。顺便说一下，您应该使用
.data
而不是设置无效的HTML属性！它还允许您拥有一个真正的布尔值！只是一个小提示。@Karl AndréGagnon感谢这个提示，将答案改为使用
数据-…
属性名称。我认为规范是任何带有
某物的属性-
是一个自定义属性，但似乎是任何
数据-*
是（对于html 5）否决投票不是欢迎新用户的好方法！
.bottom { bottom: "0vh" }
.rotate { transform: rotate(90deg) }

$('.menu').click(function() {
   $(".dropleft").toggleClass("bottom");
   $(this).toggleClass("rotate");
});