javascript - 对同一选择器执行一个又一个操作(jquery)

Question

我不知道如何解决这个问题。我有一个选择器，有 2 个操作:

1) 如果我单击，我想要运行第一个操作。 2) 如果单击了第一次，则第二次单击该对象应运行第二个操作。 3) 如果第二个已被点击，则返回步骤1)。

我是 Jquery 新手。够清楚了吗？

  // 1st action
  $('.menu').click(function(){
    $(".dropleft").css("bottom","0vh");
    $(this).css("transform","rotate(90deg)");
  });
  // 2nd action
  $('.menu').click(function() {
    $(".dropleft").css("bottom","");
    $(this).css("transform","");
  });

Answer 1

您可以传递一个 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 */);

至于Karl的评论；如果您有多个 .menu 元素，您可以在元素上设置用户定义的属性:

// 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
});