Ana akordeon kapanması tüm çocukların akordeonunu kapatmaya ihtiyaç duyuyor

Question

Bootstrap akordeonunu kullanıyorum ve iç içe akordeon ile çalışıyorum.

Şimdi başarmaya çalıştığım şey tüm çocukların akordeon kaplarını kapatıyor.

Eğer ebeveynleri kapatırsak, vücut akordeonu'un içeriği de dahil olmak üzere tüm çocuk akordeonlarını kapatmak zorundadır. Bu jsFiddle örnekte

aşağıdaki yoksa:

1. tıklayın "Heilbehandlung für Mensch und Tier"
2. Aç "Heilbehandlung für Mensch und Tier" konulu
3. tıklayın tekrar "Schamanische Arbeiten für Menschen"
4. Ve açık bir kez daha "Heilbehandlung für Mensch und Tier" Sen wil

Gördüğüm kadarıyla "Schamanische Arbeiten für Menschen" açıldı çünkü 2. adımda açtık. Bunun 3. adımda da kapatılmasını istiyorum.

Umarız neyi başarmak istediğimi anlıyorsunuzdur. İşte

kaynak kodu sağlanır:

<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

Burada kodunu 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 
     } 
    }  
    }); 
}); 

if koşul akordeon iç div etkin olduğunu tespit etmektir kontrol edebilirsiniz. Tek yol, iç div'a atanan geçerli sınıfı kontrol etmektir. Div açık olduğunda in olarak ve div kapandığında collapse olarak işaretlenir. Divun açık olduğunu biliyorsanız, kapatmak için ilgili href öğesine tıklayın.

for döngüsü, ana akordeonun href öğesinin üzerine tıkladığınızda iç akordeondaki tüm div öğelerinin daraltılmış olduğundan emin olmak içindir.

Bunun çalışması için, kodunuzdaki href öğelerine kimlikleri atadım.

Answer 2

Teşekkürler Nidhi.

Cevabınızı kabul edeceğim, çünkü bunu nasıl başaracağınız konusunda bana fikir veriyorsunuz.

DOM yapısını değiştirmeden yaptım (html'yi değiştirerek).

Bu çözüm, herhangi bir sayıda akordeon için çalışacaktır.

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(); 
         }); 
        } 


       }); 


      } 
     }