私は次のようなマークアップを持っているのdiv

Question

からクラスを追加または削除：

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion is-open"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

<div class="accordion"> 
    <h3 class="accordion-header"> 
     HADER 
     <span class="accordion-indicator"></span> 
    </h3> 
    <div class="accordion-content"></div> 
</div> 

私がやろうとしていますどのようなときに、クラス.accordionでdivにクラス.is-openedを追加または削除するためにjqueryのを使用することですクラス.accordion-header

私の問題は、すでにdivsの一部にクラス.is-openedが含まれていて、いくつかのクラスが含まれていないことです。クリックして開くことができる必要があります（クラスを追加する.is-opened）その特定のdivがクリックされただけです。ここで

は私のjQuery次のとおりです。

function accordionOpener(obj) { 
    var accordionHeader = obj.find('.accordion-header'); 
    var accordionBody = obj.find('.accordion'); 
    accordionHeader.on('click',function(){ 
     $(accordionBody).toggleClass('is-open'); 
    }); 
} 
new accordionOpener($(this)); 

私は10の賛否歳だかのように私に話すのjQuery、JavaScriptで大きなプロではありませんよ。

Answer 1

ロジックが正しくありません。これを修正するには、Clickイベントハンドラを直接.accordion-headerクラスにアタッチします。ここからDOMトラバーサルを使用して、関連する.accordion要素を見つけてクラスを切り替えることができます。あなたは、単純な使用jQueryのUIのアコーディオンのプラグインができ

$(function() { 
 
    $('.accordion-header').click(function() { 
 
    $(this).closest('.accordion').toggleClass('is-open'); 
 
    }); 
 
});

.is-open { color: #C00; } /* this is only to see the class being added/removed */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion is-open"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <h3 class="accordion-header"> 
 
     HADER 
 
     <span class="accordion-indicator"></span> 
 
    </h3> 
 
    <div class="accordion-content"></div> 
 
</div>

Answer 2

：https://jqueryui.com/accordion/ 単にdiv内のすべての要素をラップし、h3タグに広告の見出しを変更し、これを試してみてください。 次のようなプラグインを起動します。

$('.accordion').accordion(); 

このプラグインはまた、キーボードアクセスおよび他のいくつかのアクセシビリティ機能を提供します。

Answer 3

ここでは、開いたアコーディオンでのみ維持する方法があります。あなたが.showクラスを指定し、他のすべてのパネルを非表示にする必要があるCSSで

$('.accordion').click(function(){ 
    $('.accordion').removeClass('is-open'); 
    $('.show').removeClass('show'); 
    $(this).addClass('is-open'); 
    $('.accordion-content', this).addClass('show') 
}) 

。私はまた、ちょうどそれの地獄のためのカーソルを追加しました。 :)

.accordion { 
    cursor: pointer; 
} 

.accordion-content { 
    display:none; 
} 

.show { 
    display: initial; 
}