はなく、私は組み込みたい

Question

それを実装する方法がわから「この」このコードで：

$(".nds").on('click', function() { 
$("div.accordion-header").switchClass("active"); 
$('div.accordion-header').next('div.accordion-content').slideDown(750); 
}); 

今「.nds」をクリックしたときので、すべての要素クラス "アコーディオンヘッダー"が開かれています。あるいは、これ以外にも同じことを達成するための方法がありますか？ （うまくいけば）、関連するHTMLコードと

編集：

 <div id ="floating"> 
     <div class="nd3 nds" data-toggle="tooltip" data-placement="left"><a href="#SG16">16</a></div> 
     <div class="nd2 nds" data-toggle="tooltip" data-placement="left"><a href="#SG17">17</a></div> 
     <div class="nd1 nds" data-toggle="tooltip" data-placement="left"><a href="#SG18">18</a></div> 

     <div id="floating-button" data-toggle="tooltip"> 
      <span class="ham"><i class="fa fa-bars" aria-hidden="true"></i></span> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="accordion"> 
      <!-- ############ SG01 ############ --> 
      <div class="group" id="SG01"> 
       <div class="accordion-header"></div> 
       <div class="accordion-content"></div> 
      </div> 
     </div> 
    </div> 

Answer 1

アコーディオンは、あなたがクリックをバインドされてきたターゲット要素の親である場合、あなたはこのような何かを行うことができます：

$(".nds").on('click', function() { 
    var header = $(this).closest('.accordion-header'), 
     content = header.next('.accordion-content'); 

    header.switchClass('active'); 
    content.slideDown(750); 
}); 

DOM内のアコーディオンdivがターゲットとの相対的な位置によって異なりますが、一般的な考え方は、$(this)で始まるDOMを「歩く」ことですあなたがそれらのノードを見つけるまで、イベントのターゲット。

場合によっては、以下の方法をご覧ください。 closest()は何が必要ではありません。

.find(), .siblings(), .parent() 

は、あなたが操作したい要素に$（この）から取得する（あなたがそれらを一緒に連鎖することができます）これらのメソッドの適切な組み合わせを使用してください。

あなたの質問に固有のものではありませんが、それでもなお役に立ちます。関数内で同じセレクタを複数回使用する場合は、その変数を変数に保存します。そのようにして、jQueryは一度それを見つけるためにDOMを "歩く"必要があります。それ以外の場合は、jQueryをもう一度検索して探します。 （大規模なコードベースでは、そのようなものは、パフォーマンスを加味してドラッグする傾向があります）

また、おそらくdiv.accordion-headerとは対照的に、クラス「 '.accordion-header' 。より効率的なセレクタは、パフォーマンスにも役立ちます。 OP POSTS MARKUP AFTER

UPDATE：

ブートストラップウィジェットのようないくつかの既製のコンポーネントを使用しようとしているように見えます。したがって、手動でスライドトグルをコード化する必要はありません。

言われていること

、私はあなたがこのような何かをしようとしている考える：

$(".nds").on('click', function() { 
    var targId = $(this).find('a').attr('href'); 
    $(targId).find('.accordion-header').toggleClass('active'); 
    $(targId).find('.accordion-content').slideToggle(750);  
}); 

リンクをクリックしたユーザを対象とした、このように思える、とない「NDS」のdivそれはそれを包みます。しかし、あなたは$('.nds')にバインドしているので、同じ方法でコードを書いています。

Answer 2

$(".nds a").on('click', function (e) { 
    e.preventDefault(); 
    // remove active class from all accordion headers 
    $('.accordion-header').removeClass('active'); 

    // the key here is to grab the target from the href of the anchor 
    var target = $(this).attr('href'); 
    // then make changes inside the target only 
    $(target) 
     .find('.accordion-header') 
     .addClass("active") 
     .next('div.accordion-content') 
     .slideDown(750); 
});