jQuery Logique des événements/ordre des opérations

Question

Il me manque un dernier 1% d'un élément de bas de page sur lequel je travaille.

La logique de ce que je veux faire devrait être évidente: je veux que le mot EXPAND apparaisse lorsque je survole le pied de page, et je veux que le mot HIDE montre quand le pied de page est étendu.

J'ai tout ce qui fonctionne à l'exception de la partie CACHER lorsque le pied de page est déplié - lorsque je m'éloigne du bloc de pied de page, il affiche de nouveau le mot EXPAND. Je veux arrêter cet événement stationnaire. Ou du moins je pense que c'est ce que je veux faire.

=>JSFiddle vous montrera de quoi je parle.

apprécie l'aide,

Terry

$(document).ready(function() { 
    $("#shows").click(function() { 
     $('footer').toggleClass("highlight"); 
     $('#shows').text('Hide'); 
    }); 
    $("footer").hover(
     function() { 
     $('#shows').text('+Expand'); 
     }, 
     function() { 
     $('#shows').text('Shows'); 
     } 
    );  
}); 

Answer 1

Je pense que ce que vous voulez faire est de changer le texte de vol stationnaire de #shows selon que le pied de page ou non a la classe « highlight ». J'ai changé votre gestionnaire de vol stationnaire à:

$("footer").hover(
    function() { 
     $('#shows').text($('footer').hasClass("highlight") ? "Hide" : "+Expand"); 
    }, 
    function() { 
     $('#shows').text('Shows'); 
    } 
); 

Modified Fiddle

Answer 2

Qu'est-ce que vous cherchez appelle stratégiquement unbind. Cela fonctionne dans votre violon:

function setNotExpanded(elem) { 
    $(elem).unbind('mouseenter mouseleave').hover(
     function() { 
     $('#shows').text('+Expand'); 
     }, 
     function() { 
     $('#shows').text('Shows'); 
     } 
    ); 
} 

function setExpanded(elem) { 
    $(elem).unbind('mouseenter mouseleave'); 
} 

$(document).ready(function() { 

    $("#shows").click(function() { 
     if ($('footer').hasClass('highlight')) { 
     $('#shows').text('Shows'); 
     setNotExpanded('footer'); 
     } else {     
      $('#shows').text('Hide'); 
      setExpanded('footer'); 
     } 
     $('footer').toggleClass("highlight"); 
    });    

    setNotExpanded('footer'); 

});