jQuery切换div和切换类

我有一个侧面导航，用户可以点击一个链接，然后用该选项切换面板。我现在的问题是我需要能够删除类，当用户点击相同的链接来隐藏面板。jQuery切换div和切换类

现在“活动”状态在链接上左移。当你从一个链接点击到另一个链接时，它可以正常工作，但如果有人希望隐藏菜单，也可以删除“活动”状态。菜单上的青色高亮显示“活动”类。

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

来源

2012-09-06 Doidgey

您可以排除从removeClass功能点击的项目，并切换它，而不是像这样

从的jsfiddle改变如下所述。

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

来源

2012-09-06 09:22:54 Ties

http://jsfiddle.net/4A23Z/16/ – undefined

感谢fid dle :) – Ties

与hasClass一起检查很不错，很好。 – Asciiom

您可以检查如果链接活动类和只添加这个类，如果它是尚未激活：

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

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

working fiddle

来源

2012-09-06 09:24:30 Asciiom

谢谢Jeroen，我会接受上述为正确的，因为它的代码和整洁度较低，但是非常感谢 – Doidgey

你是正确:)欢迎！ – Asciiom

或者只需拨动活动类

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

来源

2012-09-06 09:34:11 BIOS

jQuery切换div和切换类

回答

相关问题