手风琴打开/关闭全节

问题描述

我有几个基本的手风琴容器。当我运行它时，它会展开一组手风琴（它应该这样做），但在我关闭打开的组之前，我无法去展开另一组手风琴。

basicAccordianToggle = function(){
if ($('.expand-all-these').length) {
  $('.expand-all-these').on('click',function(e){
    e.preventDefault();
    if ($('.expand-all-these').hasClass('collapsed')) {
      $(this).parents('.basic-accordion-container').find('.collapse').collapse('hide');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').html('Expand All <span class="plus">+</span>');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').removeClass('collapsed');
    }else{
      $(this).parents('.basic-accordion-container').find('.collapse').collapse('show');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').html('Collapse All <span class="plus">-</span>');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').addClass('collapsed');
    }
  })
}

}

解决方法

您必须为被点击的元素而不是所有元素检查 hasClass，因此使用 this 来引用被点击的元素。

basicAccordianToggle = function(){
if ($('.expand-all-these').length) {
  $('.expand-all-these').on('click',function(e){
    e.preventDefault();
    if ($(this).hasClass('collapsed')) {
    // ---^^^^-------- here
      $(this).parents('.basic-accordion-container').find('.collapse').collapse('hide');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').html('Expand All <span class="plus">+</span>');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').removeClass('collapsed');
    }else{
      $(this).parents('.basic-accordion-container').find('.collapse').collapse('show');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').html('Collapse All <span class="plus">-</span>');
      $(this).parents('.basic-accordion-container').find('.expand-all-these').addClass('collapsed');
    }
  })
}
}