Question

我不知道如何解决这个问题。我有一个选择器，有两个动作：

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

我是Jquery的新手。它够清楚吗？

＆＃13;

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

＆＃13;

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

至于卡尔的评论;如果您有多个.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
});

Answer 2

使用单个事件处理程序，并使用.data()存储标记：

$('.menu')
  .click(function() {
    var $menu = $(this);
    var active = $menu.data('active');
    var $dropleft = $menu.siblings(".dropleft");

    if (active) {
      $dropleft.css("color", "");
      $menu.css("transform", "");
    } else {
      $dropleft.css("color", "red");
      $menu.css("transform", "rotate(90deg)");
    }

    $menu.data('active', !active);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button class="menu">Menu1</button>

  <div class="dropleft">dropLeft1</div>
</div>

<div>
  <button class="menu">Menu2</button>

  <div class="dropleft">dropLeft2</div>
</div>

Answer 3

我建议使用CSS类和jQuery的toggleClass函数。不那么复杂，更易于维护。

CSS：

.bottom { bottom: "0vh" }
.rotate { transform: rotate(90deg) }

JS：

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

Answer 4

你可以查看一些css属性

 $('.menu').click(function(){
    const transform = $(this).css("transform");
    if (transform) {
      $(".dropleft").css("bottom","");
      $(this).css("transform","");
    } else {
       $(".dropleft").css("bottom","0vh");
      $(this).css("transform","rotate(90deg)");
    }
  });

Answer 5

您在单击菜单类时设置了2个要执行的功能。

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

以下是一个例子：

＆＃13;

var control = false;

$('.menu').click(function() {
  if (control = !control) {
    $(".dropleft").css("bottom", "0");
    $(this).css("transform", "rotate(90deg)");
  } else {
	  $(".dropleft").css("bottom", "");
    $(this).css("transform", "");
  }
});

＆＃13;

.menu {
  width: 100px;
  height: 50px;
  background: green;
}

.dropleft {
  width: 100px;
  height: 50px;
  position: absolue;
  left: 0;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  menu
</div>

＆＃13;

同一个选择器上的一个又一个动作（jquery）

5 个答案: