Question

我似乎无法弄清楚为什么我的.off（＆＃39;点击＆＃39;）jQuery方法无法正常工作，因为我正在删除来自＆＃39; .reveal-的事件绑定菜单＆＃39 ;.第一个动画工作正常，因为每个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>

Answer 2

您可以尝试.unbind（）事件。

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

无法获取jQuery .off（）来删除事件处理程序

2 个答案: