イベントハンドラを削除するためにjQuery .off（）を取得できません

Question

私の.off（ 'click'）jQueryメソッドが動作していない理由がわかりません。 '.reveal -メニュー'。最初のアニメーションは、各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

.unbind（）イベントを試すことができます。

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

.off

Answer 2

は、イベントを削除するために使用されます。 .onの反対のイベントを追加するためには使用されません。あなたはこのように2つの機能間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>