jQuery切换div和切换类

时间:2012-09-06 09:14:30

标签: jquery toggle

我有一个侧面导航,用户可以点击链接,然后切换面板,其中包含该部分的选项。我目前的问题是,当用户点击同一链接隐藏面板时,我需要能够删除该类。

现在,“活跃”状态正在链接上。当你从一个链接点击到另一个链接时,它工作正常,但如果有人想要隐藏菜单,则id也会删除“活动”状态。 “有效”类在菜单上显示为青色高亮显示。

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");
});​

3 个答案:

答案 0 :(得分:4)

您可以从removeClass函数中排除单击的项目,然后像这样将其切换为

从下面提供的jsFiddle更改。

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

答案 1 :(得分:0)

您可以检查链接是否具有活动类,并且仅在尚未激活时才添加此类:

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

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

working fiddle

答案 2 :(得分:0)

或者只是切换活动类

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