Bootstrap 3 свернуть аккордеон: свернуть все работы, но затем не может развернуть все при сохранении данных-родитель

Я использую Bootstrap 3 и пытаюсь настроить следующую структуру аккордеона / коллапса:

  1. Onload: каждая панель аккордеона в группе полностью свернута и функционирует как задокументировано/ожидалось.

  2. щелчок кнопки: каждая панель аккордеона расширяется и щелчок переключателей не имеет никакого эффекта (включая эффекты привязки URL).

  3. другой щелчок кнопки: все панели возвращаются в состояние onload; все свернуты и кликабельны как нормальный.

я добрался до шага 2, но когда я снова нажимаю кнопку на Шаге 3, это не имеет никакого эффекта. Я также не вижу ошибок консоли, сообщенных в инструментах Chrome Dev или при запуске кода через мой локальный JSHint.

Я хотел бы, чтобы этот цикл повторялся каждый раз при нажатии кнопки.

Я настроить мой код здесь http://bootply.com/98140 и здесь http://jsfiddle.net/A9vCx/

Я хотел бы знать, что Я поступаю неправильно и ценю предложения. Спасибо!

мой HTML:

<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

мой JS:

$(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({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

4 ответов


Обновил Ответ

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

вместо этого, лучшим подходом было бы:

  1. разрешить каждой панели переключаться по отдельности
  2. затем принудительно выполните поведение аккордеона вручную при необходимости.

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

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

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

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

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


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

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

вы будете иметь больше удачи, используя 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


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

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

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

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