javascript - 关闭嵌套 Accordion 会关闭所有内容

Question

我的嵌套 Accordion 有问题。我一直在试图弄清楚如何嵌套我的 Accordion ，但从某种意义上说，我不需要为我添加的每个特定的 Accordion 编写任何额外的 jquery 代码。

我做了一个jsfiddle作为例子... https://jsfiddle.net/L2bwmgL8/

Accordion 的代码如下所示:

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

这样，当我没有嵌套它们时，它就可以正常工作。但是，当它们像示例中那样嵌套在第一个 Accordion 下方时(忽略损坏的图像)。然后，当我单击要关闭的特定 Accordion 时，该 Accordion 内的所有内容都会关闭，包括父级 Accordion 。或者，也许我认为只是父级关闭。

现在，我尝试过，也许可以在 close_accordion_section() 函数中传递 currentAttrValue ，例如 close_accordion_section(currentAttrValue) 并更改 close_acordion_section 至:

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

但是一切都很好地打开了，但我无法再关闭任何 Accordion 了。

任何帮助和解释都会受到欢迎，可以说我仍在学习诀窍。

Answer 1

我会简化它，然后只针对当前 Accordion 的 sibling ，以免影响嵌套 Accordion 等的父级 Accordion 。

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

FIDDLE