Verschachtelte Akkordeon schließt alles

Question

ich ein Problem mit meinem verschachtelt Akkordeons haben. Ich habe versucht, wie mein Akkordeon Nest, um herauszufinden, aber in einem Sinne, dass ich nicht brauche keine zusätzlichen jquery Codes für jeden spezifischen schreiben ich hinzufügen.

machte ich einen jsfiddle als Beispiel ... https://jsfiddle.net/L2bwmgL8/

und der Code für das Akkordeon sieht wie folgt aus:

$(document).ready(function() { 
    function close_accordion_section() { 
    $('.accordion .accordion-section-title').removeClass('active'); 
    $('.accordion .accordion-section-content').slideUp(1000).removeClass('open'); 
    } 

    $('.accordion-section-title').click(function(e) { 
    // Grab current anchor value 
    var currentAttrValue = $(this).closest('.accordion-section-title'); 
    //console.log(currentAttrValue); 
    if (currentAttrValue.hasClass('active')) { 
     close_accordion_section(); 
    } else { 
     close_accordion_section(); 

     // Add active class to section title 
     currentAttrValue.addClass('active'); 
     // Open up the hidden content panel 
     $('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open'); 
     setTimeout(function() { 
     $('html, body').animate({ 
      scrollTop: $(currentAttrValue.attr('href')).offset().top 
     }, 1000); 
     }, 1001); 
     //console.log((currentAttrValue.attr('href'))); 
    } 

    e.preventDefault(); 
    }); 
}); 

Auf diese Weise funktioniert es gut, wenn ich nicht haben sie verschachtelt. Wenn sie jedoch wie im Beispiel unter dem ersten Akkordeon verschachtelt sind (ignoriere die zerbrochenen Bilder). Dann, wenn ich auf die spezifische Akkordeon klicken, um zu schließen, alles Innere ist, das Akkordeon schließt, einschließlich der Eltern ein. Oder, vielleicht denke ich, dass nur die Eltern schließen.

Jetzt habe ich versucht, vielleicht die currentAttrValue in der close_accordion_section() Funktion wie close_accordion_section(currentAttrValue) vorbei und Ändern der close_acordion_section zu:

function close_accordion_section() { 
    $(this).closest('.accordion .accordion-section-title').removeClass('active'); 
    $(this).closest('.accordion .accordion-section-content').slideUp(1000).removeClass('open'); 
} 

Aber dann öffnet sich alles schön, aber ich kann nicht mehr jeder der Akkordeons schließen.

Jede Hilfe und Erklärung wäre appriciated, ich bin immer noch das Erlernen der Seile sozusagen.

Answer 1

ich es vereinfachen würde, und dann Ziel nur die Geschwister des aktuellen Akkordeon, um nicht die Mutter Akkordeon verschachtelter Akkordeons usw.

$(document).ready(function() { 
    $('.accordion-section-title').on('click', function(e) { 
     e.preventDefault(); 

     var self  = $(this).toggleClass('active'); 
     var section = self.closest('.accordion-section'); 
     var siblings = section.siblings('.accordion-section'); 

     siblings.find('.accordion-section-content').slideUp(1000).removeClass('open').end() 
       .find('.accordion-section-title').removeClass('active'); 

     $('.accordion ' + self.attr('href')).slideToggle(1000).toggleClass('open') 
              .find('.accordion-section-title.active') 
              .trigger('click'); 


     if (self.hasClass('active')) { 
      setTimeout(function() { 
       $('html, body').animate({ 
        scrollTop: $(self.attr('href')).offset().top 
       }, 1000); 
      }, 1001); 
     } 
    }); 
}); 

zu beeinflussen

FIDDLE

Answer 2

Das Problem ist in Ihrer else if-Anweisung:

benötigen Sie einen des Anrufs zu close_accordion_section schneiden():

Ich habe ein Problem mit meinem verschachtelten Akkordeon. Ich habe versucht herauszufinden, wie ich meine Akkordeons verschachteln kann, aber in einem Sinn, dass ich keine extra JQuery-Codes für jede spezifische, die ich hinzufüge, schreiben muss.

ich ein jsfiddle als Beispiel gemacht ... https://jsfiddle.net/L2bwmgL8/

und der Code für das Akkordeon sieht wie folgt aus:

$(document).ready(function() { 
    function close_accordion_section() { 
    $('.accordion .accordion-section-title').removeClass('active'); 
    $('.accordion .accordion-section-content').slideUp(1000).removeClass('open'); 
    } 

    $('.accordion-section-title').click(function(e) { 
    // Grab current anchor value 
    var currentAttrValue = $(this).closest('.accordion-section-title'); 
    //console.log(currentAttrValue); 
    if (currentAttrValue.hasClass('active')) { 
     close_accordion_section(); 
    } else { 
     //CUT THIS 

     // Add active class to section title 
     currentAttrValue.addClass('active'); 
     // Open up the hidden content panel 
     $('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open'); 
     setTimeout(function() { 
     $('html, body').animate({ 
      scrollTop: $(currentAttrValue.attr('href')).offset().top 
     }, 1000); 
     }, 1001); 
     //console.log((currentAttrValue.attr('href'))); 
    } 

    e.preventDefault(); 
    }); 
}); 

Geige: https://jsfiddle.net/kjyqmzuh/