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(){
     $(this).toggleClass("active");
 });​
于 2012-09-06T09:34:11.810 に答える
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 に答える