.click ne fonctionne pas

Question

J'essaie d'obtenir l'action lorsque vous cliquez et survolez (marge-gauche + bordure-bas) le .hover c'est bien ... mais mon .click ne fonctionne pas, j'ai essayé ceci:

$(".border").hover(
    function(){ 
     $(this).switchClass("border", "border_active", 500); 
     return false; 
    } 
    ,function(){ 
     $(this).switchClass("border_active", "border", 400); 
     return false; 
    } 
); 
$(".border").click(
    function(){ 
     $(this).removeClass('border'); 
     $(this).addClass('border_active') 
    } 
    ,function(){ 
     $(this).removeClass('border_active'); 
     $(this).addClass('border'); 
    } 
); 

mais rien, voici le code du trou: http://jsfiddle.net/Fe6pE/13/, s'il vous plaît me montrer la meilleure façon d'obtenir ce travail, Merci

Answer 1

Pour ce faire, il suffit d'utiliser toggleClass;

$('.border').click(function() { 
    $(this).toggleClass('border-active border'); 
}); 

Cela va simplement alterner les classes. Si border-active est allumé pour commencer, puis en cliquant dessus, le border-active sera désactivé et le border sera activé.

Answer 2

en jQuery, click() ne prend pas en 2 arguments de la fonction.

Ce que vous devez utiliser est au contraire mousedown() et mouseup()

Ou mieux encore, vous pouvez éviter JavaScript et structurer votre CSS comme:

.border { 
    /* normal styles */ 
} 
.border:hover { 
    /* styles when hovered */ 
} 
.border:active { 
    /* styles when mouse is down */ 
} 

Answer 3

Comme je l'ai mentionné dans les commentaires, il suffit d'ajouter toggleClass?

$(".border").click(function(){ 
    $(this).toggleClass('border'); 
    $(this).toggleClass('border_active'); 
});