1

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

现在，“活动”状态正在链接上。当您从一个链接点击到另一个链接时它工作正常，但如果有人希望隐藏菜单，我喜欢它也删除“活动”状态。“活动”类在菜单上以青色突出显示。

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

3 回答 3

4

您可以从 removeClass 函数中排除单击的项目，并像这样切换它

从下面提供的 jsFiddle 更改。

$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active');
    $(this).stop(true, true).toggleClass("active");
});
于 2012-09-06T09:22:54.640 回答
0

您可以检查链接是否具有活动类，并且仅在尚未活动的情况下添加此类：

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

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

工作小提琴

于 2012-09-06T09:24:30.707 回答
0

或者只是切换活动类 

 $('.sn').click(function(){
     $(this).toggleClass("active");
 });​
于 2012-09-06T09:34:11.810 回答