Ответ 1

Обновленный ответ

Попытка открыть несколько панелей элемента управления сглаживанием, который настроен как аккордеон, то есть с набором атрибутов data-parent, может оказаться довольно проблематичным и ошибочным (см. этот вопрос на нескольких панелях открыть после программного открытия панели)

Вместо этого наилучшим подходом было бы:

• Разрешить каждой панели индивидуально переключаться
• Затем, при необходимости, соблюдайте поведение аккордеона вручную.

Чтобы каждая панель переключалась индивидуально, в элементе data-toggle="collapse" установите атрибут data-target в селектор идентификатора панели .collapse (вместо установки атрибута data-parent родительский контроль. Подробнее об этом вы можете узнать в вопросе Модифицировать плагин для раскрутки Twitter-бутстрапа, чтобы сохранить аккордеоны открытыми.

Грубо, каждая панель должна выглядеть так:

<div class="panel panel-default">
   <div class="panel-heading">
         <h4 class="panel-title"
             data-toggle="collapse" 
             data-target="#collapseOne">
             Collapsible Group Item #1
         </h4>
    </div>
    <div id="collapseOne" 
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

Чтобы вручную выполнить поведение аккордеона, вы можете создать обработчик для события show collapse, которое происходит непосредственно перед отображением любых панелей. Используйте это, чтобы все открытые панели закрывались до того, как выбран выбранный (см. ответ на несколько открытых панелей). Вы также хотите, чтобы код выполнялся, когда панели активны. Чтобы сделать все это, добавьте следующий код:

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

Затем используйте show и hide для переключения видимости каждой из панелей и data-toggle для включения и отключения элементов управления.

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

Рабочая демонстрация в jsFiddle

Ответ 2

По какой-либо причине $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); работает только в первый раз, и он работает только для расширения складного. (Я попытался начать с расширенного складного, и он не рухнет.)

Это может быть только то, что запускается после того, как вы первый раз инициализируете сбой с этими параметрами.

У вас будет больше удачи с помощью методов show и hide.

Вот пример:

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse('show');
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

http://bootply.com/98201

Обновление

Предоставлено KyleMit, похоже, лучше справляется с этим, а затем со мной. Я впечатлен его ответом и пониманием.

Я не понимаю, что происходит или почему show, казалось, переключается в некоторых местах.

Но после некоторого времени возиться.. Наконец пришел со следующим решением:

$(function() {
  var transition = false;
  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('#accordion').on('show.bs.collapse',function(){
    if($active){
        $('#accordion .in').collapse('hide');
    }
  });

  $('#accordion').on('hidden.bs.collapse',function(){
    if(transition){
        transition = false;
        $('.panel-collapse').collapse('show');
    }
  });

  $('.collapse-init').on('click', function() {
    $('.collapse-init').prop('disabled','true');
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      if($('.panel-collapse.in').length){
        transition = true;
        $('.panel-collapse.in').collapse('hide');       
      }
      else{
        $('.panel-collapse').collapse('show');
      }
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
    setTimeout(function(){
        $('.collapse-init').prop('disabled','');
    },800);
  });
});

http://bootply.com/98239

Ответ 3

Чтобы сохранить природу аккордеона в неприкосновенности, если вы хотите использовать функции "скрывать" и "показывать", такие как .collapse( 'hide' ), вы должны инициализировать сбрасываемые панели с родительским свойством, установленным в объекте с помощью toggle: false, прежде чем совершать какие-либо вызовы 'hide' или 'show'

// initialize collapsible panels
$('#accordion .collapse').collapse({
  toggle: false,
  parent: '#accordion'
});

// show panel one (will collapse others in accordion)
$( '#collapseOne' ).collapse( 'show' );

// show panel two (will collapse others in accordion)
$( '#collapseTwo' ).collapse( 'show' );

// hide panel two (will not collapse/expand others in accordion)
$( '#collapseTwo' ).collapse( 'hide' );

Ответ 4

лучшее и проверенное решение - это сделать небольшой фрагмент, который скроет вкладку аккордеона, которая уже открыта при загрузке. В моем случае последняя шестая вкладка была открыта, поэтому я заставил ее рухнуть при загрузке страницы.

 $(document).ready(){
      $('#collapseSix').collapse("hide");
 }