jQuery bascule div et bascule classe

Question

J'ai une navigation latérale où un utilisateur peut cliquer sur un lien qui bascule alors un panneau avec des options pour cette section. Mon problème avec ceci en ce moment est que je dois pouvoir enlever la classe quand un utilisateur clique sur le même lien pour cacher le panneau.

L'état 'actif' est maintenant à gauche sur le lien. Cela fonctionne très bien lorsque vous cliquez d'un lien sur un autre, mais je voudrais aussi supprimer l'état 'actif' si quelqu'un souhaite cacher le menu. La classe 'active' est montrée avec la surbrillance cyan dans le menu.

jsFiddle:http://jsfiddle.net/visualdecree/4A23Z/11/

jQuery:

$(".sn a").on('click',function(){ 

    var panID = $("#" + $(this).data('panel')); 

    $("div[id*='sn-pan-']") 
    .stop() 
    .hide({slide:'toggle'}, 400); 

    $(panID) 
    .css({'left' : '100px','overflow':'visible'}) 
    .stop() 
    .animate({width:'toggle'}, 400) 
}); 

$('.sn').click(function(){ 
    $('ul.sidenav li').removeClass('active');      
    $(this).stop(true,true).addClass("active"); 
});​ 

Answer 1

Vous pouvez exclure l'élément cliqué de la fonction removeClass, et l'activer au lieu comme celui-ci

changé du jsFiddle ci-dessous.

$('.sn').click(function(e) { 
    $('ul.sidenav li').not(this).removeClass('active'); 
    $(this).stop(true, true).toggleClass("active"); 
}); 

Answer 2

Vous pouvez vérifier si le lien a la classe active et ajouter que cette classe si elle n'a pas été encore actif:

$('.sn').click(function(){ 
    var isActive $(this).hasClass('active'); 
    $('ul.sidenav li').removeClass('active'); 

    $(this).stop(true,true); 
    if(!isActive){ 
     $(this).addClass("active"); 
    } 
}); 

working fiddle

Answer 3

Ou tout simplement basculer la classe active

$('.sn').click(function(){ 
    $(this).toggleClass("active"); 
});​