Question

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

我以jsfiddle为例...... https://jsfiddle.net/L2bwmgL8/

手风琴的代码如下：

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

这种方式，当我没有嵌套时，它工作正常。但是，当它们在示例中嵌套时，在第一个手风琴下（忽略损坏的图像）。然后当我点击特定的手风琴关闭时，手风琴内的所有东西都会关闭，包括父手风琴。或者，也许我认为只是父母关闭。

现在，我尝试过，可能会将currentAttrValue内的close_accordion_section()传递给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');
}

但是一切都很好地打开了，但我不能再关闭任何一支手风琴了。

任何帮助和解释都会得到满足，我仍在学习绳索。

Answer 1

我会简化它，然后只针对当前手风琴的兄弟姐妹，以免影响嵌套手风琴的父手风琴等。

$(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

Answer 2

问题出在你的if else声明中：

你需要切断对close_accordion_section（）的一个调用：

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

我以jsfiddle为例...... https://jsfiddle.net/L2bwmgL8/

手风琴的代码如下：

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

小提琴：https://jsfiddle.net/kjyqmzuh/

关闭嵌套式手风琴将关闭所有内容

2 个答案: