javascript - 无法让 jQuery .off() 删除事件处理程序

Question

考虑到我要从“.reveal-menu”中删除事件绑定(bind)，我似乎无法弄清楚为什么我的 .off('click') jQuery 方法不起作用。第一个动画效果很好，因为每个 div 以 78 的增量移动到各自的位置。但我似乎无法让它返回。

JQUERY

$(function(){

  var userMenuDivs = $('#user-menu div:gt(1)');
  userMenuDivs.hide();


  $('.reveal-menu').on('click',
    function(){
      $(this).addClass('down');
      iconSpacerCount = 78;
      userMenuDivs.show();
      $.each(userMenuDivs, function(index,value){
        $(this).animate({top:iconSpacerCount},200);
        iconSpacerCount += 78;});  
  });

  $('.reveal-menu').off('click',
    function(){
      $(this).removeClass('down');
      iconSpacerCount = 0;
      $.each(userMenuDivs, function(index,value){
        $(this).animate({top:iconSpacerCount});
      });
    });



});

HTML

  <div id="user-menu">
    <div class="reveal-menu">
    <i class="fa fa-plus fa-lg"></i>
    </div>

    <div class="post-option">
      <a href="#" class="fa fa-pencil fa-2x"></a>
    </div>

    <div class="search-option">
      <a href="#" class="fa fa-search fa-lg"></a>
    </div>

    <div class="chat-option">
      <a href="#" class="fa fa-comments fa-lg"></a>
    </div>

    <div class="profile-option">
      <a href="#" class="fa fa-user fa-lg"></a>
    </div>

    <div class="friends-option">
      <a href="#" class="fa fa-users fa-lg"></a>
    </div>

    <div class="organizations-option">
      <a href="#" class="fa fa-building-o fa-lg"></a>
    </div>

    <div class="public-figures-option">
      <a href="#" class="fa fa-bullhorn fa-lg"></a>
    </div>

    <div class="sign-out-option">
      <a href="#" class="fa fa-sign-out fa-lg"></a>
    </div>


  </div>

这是一个视频链接，向您展示我在做什么。 https://dl.dropboxusercontent.com/u/3270373/2016-06-01_21-57-20.mp4

Answer 1

.off 用于删除事件。不用于添加.on的相反事件。您可以像这样在两个函数之间切换 click 事件:

$(function() {
  var userMenuDivs = $('#user-menu div:gt(1)');
  userMenuDivs.hide();

  $('.reveal-menu').on('click', revealMenuOn);
});

function revealMenuOn() {
  $(this).addClass('down');
  $('#user-menu div:gt(1)').slideDown( "slow" );
  $('.reveal-menu').off('click').on('click', revealMenuOff);
}

function revealMenuOff() {
  $(this).removeClass('down');
  $('#user-menu div:gt(1)').slideUp( "slow" );
  $('.reveal-menu').off('click').on('click', revealMenuOn);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="user-menu">
  <div class="reveal-menu">
    <i class="fa fa-plus fa-lg">1</i>
  </div>

  <div class="post-option">
    <a href="#" class="fa fa-pencil fa-2x">2</a>
  </div>
  <div class="search-option">
    <a href="#" class="fa fa-search fa-lg">3</a>
  </div>
  <div class="chat-option">
    <a href="#" class="fa fa-comments fa-lg">4</a>
  </div>
  <div class="profile-option">
    <a href="#" class="fa fa-user fa-lg">5</a>
  </div>
  <div class="friends-option">
    <a href="#" class="fa fa-users fa-lg">6</a>
  </div>
  <div class="organizations-option">
    <a href="#" class="fa fa-building-o fa-lg">7</a>
  </div>
  <div class="public-figures-option">
    <a href="#" class="fa fa-bullhorn fa-lg">8</a>
  </div>
  <div class="sign-out-option">
    <a href="#" class="fa fa-sign-out fa-lg">9</a>
  </div>
</div>