2

別の要素がクリックされたときに1つの要素を閉じるアコーディオンがあります。また、1回クリックすると開き、2回クリックすると閉じます（accordionButton）。開いた矢印と閉じた矢印のどちらがあるかを制御する2つのクラスの追加と削除を除けば、すべてがうまく機能しています。'accordionButtonActive'と'accordionButtonNotactive'これはクリックで制御されているため、もう一度クリックして閉じるのではなく、別のものをクリックして閉じます。これは完全に機能します。

私はJqueryを初めて使用し、これを可能な限り機能させることができました。今では、この最後の部分を正常に機能させることに少し戸惑っています。

JQuery：

    $("div.accordionButton").addClass("accordionButtonNotactive");

//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {

    if($(this).next().is(':visible')) {
        $('div.accordionContent').slideUp('normal');
          $(this).addClass("accordionButtonNotactive").removeClass("accordionButtonActive");

    } else {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
        $(this).removeClass("accordionButtonNotactive").addClass("accordionButtonActive"); 

    }
});

    //OPEN FIRST    
$("#open").trigger('click');


    });

単純なHTML：

  <div class="accordionButton" id="open">Title</div>
  <div class="accordionContent">
    <p>Content</p>
  </div>
4

1 に答える 1

3

ヘッダーがクリックされたときに、アクティブクラスを削除して、任意の兄弟の非アクティブクラスを追加することができます。

$(this).siblings('.accordionButtonActive')
    .removeClass('accordionButtonActive')
    .addClass('accordionButtonNotactive');

例

.accordionButtonさらに、のスタイルを1つ追加して上書きする方が簡単な場合があるため.accordionButton.active、1つのクラスのみを処理する必要があります。

また、ある条件や別の条件でtoggleClass使用するのではなく、現在の要素に対して、その1つのクラスを1回だけ処理する必要があるためにを使用することもできます。addClassremoveClass

例

于 2012-04-30T12:38:01.287 に答える