Basculement entre le menu états actifs en utilisant jQuery

Question

J'ai le code jQuery suivant:

$("ul.menu li a").click(function() { 
     $("ul.menu li a").removeClass("currentMenu"); 
     $(this).addClass("currentMenu"); 
    }); 

Au démarrage de la page, mon bouton de menu « Home » est réglé sur « currentMenu », qui a essentiellement un fond de couleur mis à l'orange . Ce que j'essaye de réaliser, que le code de jQuery ci-dessus ne répond pas est si je clique sur le bouton "Home" existant qui est réglé sur "currentMenu", je voudrais réellement enlever cette classe, ainsi le bouton "Home" n'a plus la couleur d'arrière-plan orange et vice-versa, lorsque le bouton "Home" est désactivé, puis la classe "currentmenu".

Espérons que cela a du sens.

Answer 1

Vous pouvez le faire en utilisant .not() pour filtrer l'élément courant puis .toggleClass(), comme ceci:

$("ul.menu li a").click(function() { 
    $("ul.menu li a").not(this).removeClass("currentMenu"); 
    $(this).toggleClass("currentMenu"); 
}); 

You can test it out here, ce filtres juste la cliquez sur l'ancre hors de la collection de sorte qu'il ne sera pas affecté par le .removeClass() puis fait .toggleClasss() au lieu de .addClass() pour donner e l'effet de bascule on/off que vous recherchez.

Answer 2

Quelque chose comme cela pourrait fonctionner:

$("ul.menu li a").click(function() { 

    if ($(this).is(".currentMenu")) { 
    $(this).removeClass("currentMenu"); 
    } else { 
    $(this).addClass("currentMenu"); 
    } 

    $("ul.menu li a").not(this).removeClass("currentMenu"); 
});