親アコーディオンを閉じてすべての子供を閉じる必要があります。アコーディオン

Question

私はブートストラップアコーディオンを使用しています。ネストされたアコーディオンで動作するようにしています。

ここで達成しようとしているのは、すべての子どものアコーディオンコンテナを閉じることです。

親を閉じると、体のアコーディオンの内容を含むすべての子供用アコーディオンを閉じる必要があります。このjsFiddle例で

次の手順を実行している場合：

1. クリックして "HeilbehandlungエリーゼMenschウントティア"
2. オープン "HeilbehandlungエリーゼMenschウントティア" に
3. をクリックし、再び "Schamanische ArbeitenのfürMenschen"
4. そしてオープンは再び "HeilbehandlungエリーゼMenschウントティア" あなたはWIL

私はステップ＃2でそれを開いたので、 "Schamanische ArbeitenfürMenschen"が開かれていることがわかります。私はそれがステップ＃3でも閉じられることを望む。

私が達成したいことを理解していただければ幸いです。ここで

は、ソースコードが提供されます。

<div class="panel-group uk-row-first" id="accordion-neuweltenbreucken"> 
    <div class="uk-width-medium-1-1"> 

     <article class="uk-article" id="accordion" data-permalink="http://neu.weltenbruecken.com/16-accordeon/36-heilbehandlung-fur-mensch-und-tier"> 
      <div> 

       <div class="panel panel-default"> 
        <div class="panel-heading main"> 
         <h4 class="panel-title"><a href="#collapse2" class="panel-toggle collapsed" data-parent="#accordion-neuweltenbreucken" data-body-background="background2.jpg" data-toggle="collapse"> Heilbehandlung für Mensch und Tier </a></h4> 
        </div> 
        <div id="collapse2" class="panel-body collapse"> 
         <div class="panel-inner main"> 
          <!-- Here we insert another nested accordion --> 
          <div id="accordion4" class="panel-group"> 
           <div class="panel panel-default"> 
            <div class="panel-heading"> 
             <h4 class="panel-title"><a href="#collapse2Inner1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische Arbeiten für Menschen </a></h4> 
            </div> 
            <div id="collapse2Inner1" class="panel-body collapse"> 
             <p>Vorbereitungsarbeiten Fr. 75/h , Heilarbeiten Fr. 135/h, Nacharbeit, Dokumentation Fr. 75/h</p> 
             </div> 
            </div> 
           </div> 
           <div class="panel panel-default"> 
            <div class="panel-heading"> 
             <h4 class="panel-title"><a href="#collapse2Inner2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion4"> Schamanische und telepathische Arbeit für Tiere </a></h4> 
            </div> 
            <div id="collapse2Inner2" class="panel-body collapse"> 
             <div class="panel-inner"> 
              <h5>Telepathische Kommunikation</h5> 
            </div> 
            </div> 
           </div> 
          </div> 
          <!-- Inner accordion ends here --> 
         </div> 
        </div> 
       </div> 


     </article> 
    </div> 

Answer 1

あなたはif条件がアコーディオンで、内側のdivがアクティブであることを検出するものであるhttps://jsfiddle.net/nidhi_sh/ot4m9q2u/1/

$(document).ready(function(){ 
    $("#acc2").click(function(){ 
    var n=2; //total number of inner div in accordion 
    for(i=1;i<=n;i++) 
    { 
     if($("#collapse2Inner"+i).hasClass("in")) 
     { 
      $("#acc2inner"+i).click(); //Click on link of each accordion to close it 
     } 
    }  
    }); 
}); 

ここにコードを確認することができます。 1つの方法は、内部divに割り当てられている現在のクラスをチェックすることです。 divが開いているときはin、divが閉じるときはcollapseとマークされています。 divが開いていることがわかったら、対応するhref要素をクリックして閉じます。

forループは、親アコーディオンのhref要素をクリックすると内部アコーディオンのdiv要素がすべて折りたたまれていることを確認することです。

これを行うには、コードのhref要素にidを割り当てました。

Answer 2

ありがとうございました。

これを達成する方法がわかっているので、私はあなたの答えを受け入れます。

DOM構造（htmlの変更）を変更せずに作成しました。

このソリューションは、任意の数のアコーディオンの子供のために機能します。

closeChildrenAccordion : function (accordion) { 
      if (jQuery(".accordion-open")) { 
       jQuery(".accordion-open").unbind().click(function() { 
        jQuery(accordion).removeClass('accordion-open'); 
        var parentPanelHeading = jQuery(this).closest('.panel-heading'); // Get parent 
        var siblings   = parentPanelHeading.siblings()[0]; // Get div that needs to be closed when closing parent div 

        if(jQuery(siblings).hasClass("in")) 
        { 
         jQuery(siblings).find('a').each(function (index, element) { 
          if(jQuery(element).hasClass('active')) 
           element.click(); 
         }); 
        } 


       }); 


      } 
     }