2

右側にコンテンツを表示/非表示にする左側のナビゲーションがあります。現在、リンクをクリックすると、右側の対応するコンテンツがフェードインし、そのリンクにアクティブなクラスが追加されます。私の問題は、アクティブなリンクをもう一度クリックすると、右側のコンテンツが再びフェードインし続けることです。リンクがアクティブなときにそのクリックのバインドを解除し、別のナビゲーションリンクをクリックした場合（その後、前のリンクからクラスを削除して現在のリンクに追加）、クリックイベントをすべての非アクティブなリンクに再バインドします。

これが私の現在のコードです：

    $('.mixesSidebar ul li').click( function() {
           //Get the attribute id
           var liId = $(this).attr('id');
           //removeClass active from all li's, addClass active to this
         $('.mixesSidebar ul li').removeClass('active');
         $(this).addClass('active');
           //Hide all content on the right
         $('.mixesContent ul').hide();
           //Find the content with the same class as the clicked li's ID, and fadeIn
         $('.mixesContent').find('.' + liId).fadeIn('slow');
});

どうもありがとうございました！

4

3 に答える 3

1

ロジックを次で囲みます：

if (!$(this).hasClass('active')) {
  ...
}

バインドを解除して再バインドするよりもはるかに安定しています。

于 2010-04-20T03:45:02.953 に答える
1

$( this )すでにアクティブであるかどうかを確認した場合はどうなりますか。そうでない場合は、コードを続行します。

したがって、関数の開始時に、次のように実行します。

if( ! $( this ).hasClass( 'active' ) )
{
  // do stuff
}
于 2010-04-20T03:46:41.787 に答える
0

これを正しく理解していれば、フェードインしたdivに「アクティブ」または何かのクラスを追加してから、そのクラスがすでにあるかどうかを確認し、ある場合はフェードしないでください。

私の説明は泥のようにはっきりしているので編集してください：

$('.mixesContent').find('.' + liId).addClass("active_list");

if (! $('.mixesContent').find('.' + liId).hasClass("active_list"){
  //do the fade
}
于 2010-04-20T03:44:57.370 に答える