0

すべてが折りたためるシンプルなアコーディオンがあります。したがって、アクティブなパネルをクリックすると折りたたまれます。矢印に疑似クラスが割り当てられbeforeてafterいますが、アクティブなクラスをクリックして折りたたむときに、アクティブなラベルからアクティブなクラスを削除する方法がわかりません。アクティブなクラスは、別のラベルをクリックすると削除されますが、アクティブなラベルをクリックして折りたたむと削除されません。

ここにフィドルがあります。

そして、ここにスクリプトがあります：

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    $(this).addClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});

いくつかの異なる構成を試しました (たとえば、ステートメントを逆にしてクラスif(false)を削除するなど)。activeどんな助けでも感謝します。

4

3 に答える 3

2

試す

    $(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    if(false == $(this).next().is(':visible')) {
        $(this).addClass('active');
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});
于 2013-10-28T06:18:43.273 に答える
1

を使用toggleClass()してsiblings()

これを試して

    $(".accordion > dt").click(function(){
    //$('.active').removeClass('active');
         $(this).toggleClass('active').siblings('dt').removeClass();

          if(false == $(this).next().is(':visible')) {
    $('.accordion > dd').slideUp(600);
          }
       $(this).next().slideToggle(600);
});
于 2013-10-28T06:22:32.233 に答える
1

これは、dtクリックするたびにアクティブなクラスが要素に追加されるためです。アクティブなクラスが存在しない場合、つまりdd要素が表示されていない場合にのみ、アクティブなクラスを追加します。だからあなたはに変更する必要があります

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
        $(this).addClass('active');
    }
    $(this).next().slideToggle(600);
});

更新されたデモ Fiddleを確認してください。

于 2013-10-28T06:23:43.467 に答える