Kann jQuery .off() nicht entfernen, um den Ereignishandler zu entfernen

Question

Ich kann nicht herausfinden, warum meine .off ('click') jQuery-Methode nicht funktioniert, da ich die Ereignisbindung von '.reveal entferne -Speisekarte'. Die erste Animation funktioniert gut, wenn sich jedes Div in Schritten von 78 zu seiner jeweiligen Position bewegt. Aber ich kann es nicht scheinen, es zurück zu bekommen.

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> 

Hier ist ein Link zu einem Video zu zeigen, was ich tue. https://dl.dropboxusercontent.com/u/3270373/2016-06-01_21-57-20.mp4

Answer 1

Sie können .unbind() Ereignis versuchen.

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

Answer 2

Die .off wird verwendet, um die Ereignisse zu entfernen. Es wird nicht verwendet, um das entgegengesetzte Ereignis von .on hinzuzufügen. Sie können die click Ereignis zwischen zwei Funktion wie folgt wechseln:

$(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>