关闭嵌套手风琴关闭一切

Closing nested accordion closes everything

本文关键字：嵌套 手风琴      更新时间：2023-09-26

我的嵌套手风琴有问题。我一直在想如何嵌套我的手风琴，但从某种意义上说，我不需要为我添加的每一个特定的jquery代码写任何额外的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();
  });
});

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

现在，我尝试了，也许像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');
}

但后来一切都很顺利，但我再也关不上任何手风琴了。

任何帮助和解释都会被告知，可以说我仍在学习诀窍。

我会简化它，然后只针对当前手风琴的兄弟手风琴，这样就不会影响嵌套手风琴等的父手风琴。

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

问题出现在if-else语句中：

您需要切断其中一个对close_accordion_ssection（）的调用：

我的嵌套手风琴有问题。我一直在想如何嵌套我的手风琴，但从某种意义上说，我不需要为我添加的每一个特定的jquery代码写任何额外的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/

相关文章：