时间戳

首页 > 解决方案 > 手风琴打开/关闭所有部分

javascript - 手风琴打开/关闭所有部分

问题描述

我有几个基本的手风琴容器。当我运行它时，它将展开一组手风琴（它应该），但我不能去展开另一组手风琴，直到我关闭打开的组。

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');
    }
  })
}

}

标签： javascriptonclickaccordion

解决方案

您必须检查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');
    }
  })
}
}

推荐阅读