Как вы делаете Twitter-бутстрап-аккордеон, чтобы одна группа открылась?

Я пытаюсь подражать панели Outlook, используя загрузочный лоток Twitter, используя плагин аккордеона и сглаживания, до сих пор я получил крах и аккордеон, но в настоящее время он позволяет свернуть все разделы.

Я хотел бы ограничить его так, чтобы всегда показывался один и только один.

Вот о чем я работаю: http://jsfiddle.net/trajano/SMT9D/, и я думаю, что он где-то рядом с

$('#accordions').on('hide', function (event) {
  console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})

Ответы

Ответ 1

Вот простой способ сделать это:

Новый Bootstrap 3

JsFiddle для Bootstrap 3.

Код для Bootstrap 3:

$('.panel-heading a').on('click',function(e){
    if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

Код проверяет, является ли элемент с кликом тем, который в настоящее время отображается (классом "in" ), и если он имеет класс "in", он останавливает процесс скрытия.

Устаревший загрузочный лот 2

JsFiddle для Bootstrap 2.

Код для Bootstrap 2:

$('.accordion-toggle').on('click',function(e){
    if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

Примечание. Будьте внимательны, если вы хотите добавить больше событий на аккордеон, поскольку e.stopPropagation() блокирует события, которые произойдут после проверки.

Ответ 2

Я хочу точно ответить @Hugo Dozois

http://jsfiddle.net/SMT9D/61/

Вы должны добавить e.preventDefault(); , чтобы предотвратить поведение по умолчанию # HTML-якоря, если у вас есть прокрутка на странице

$('.panel-heading a').on('click',function(e){
    if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
        e.preventDefault();
        e.stopPropagation();
    }
});

Ответ 3

Или вы можете использовать простой трюк CSS следующим образом:

/*
prevent the active panel from collapsing
 */
.panel-group [aria-expanded=true]{
  /*
  http://caniuse.com/#feat=pointer-events
  Works for MOST modern browsers. (- Opera Mobile)
  */
  pointer-events: none;
}

должен иметь правильные теги на неактивных ссылках панели

 aria-expanded="false"

Ответ 4

Обновлено 2018

Здесь, как сохранить хотя бы открытый и в обоих Bootstrap v3 или v4. Это означает, что открытый аккордеон можно закрыть только переключением другого открытого.

Бутстрап 4

https://www.codeply.com/go/bbCcnl0jBB

// the current open accordion will not be able to close itself
$('[data-toggle="collapse"]').on('click',function(e){
    if ( $(this).parents('.accordion').find('.collapse.show') ){
        var idx = $(this).index('[data-toggle="collapse"]');
        if (idx == $('.collapse.show').index('.collapse')) {
            e.stopPropagation();
        }
    }
});

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

Бутстрап 3

$('[data-toggle="collapse"]').on('click',function(e){
    if($(this).parents('.panel').find('.collapse').hasClass('in')){
        var idx = $(this).index('[data-toggle="collapse"]');
        var idxShown = $('.collapse.in').index('.accordion-body');
        if (idx==idxShown) {
            e.stopPropagation();
        }
    }
});

https://www.codeply.com/go/yLw944BrgA

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

(Примечание: класс panel необходим в Bootstrap 3, чтобы заставить поведение аккордеона работать)

Ответ 5

Bootstrap 4.0

$('.card').click(function(e) {
  if (
    $(this)
      .find('.collapse')
      .hasClass('show')
  ) {
    e.stopPropagation();
  }
});

Этот кодовый блок проверяет, сбрасывается ли кликнутая карта (смотря на div с collapse класса). Когда карта в настоящий момент show n, она прекращает распространение события.

Ответ 6

Как и все другие ответы JS использовать нецелесообразным stopPropagation() здесь мое решение, используя только родные Bootstrap события (проверено на Bootstrap 4).

JsFiddle

$('#accordionExample').on('show.bs.collapse', function () {
    $(this).data('isShowing', true);
});

$('#accordionExample').on('hide.bs.collapse', function (event) {
    if (!$(this).data('isShowing')) {
        event.preventDefault();
    }

    $(this).data('isShowing', false);
});

Он использует тот факт, что щелчок на show.bs.collapse элементе приведет к show.bs.collapse а затем hide.bs.collapse. В то время как щелчок по открытому элементу приведет только к hide.bs.collapse.

Ответ 7

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

$("[data-toggle=collapse][data-parent]").click(function (e) {
    var button = $(this);
    var parent = $(button.attr("data-parent"));
    var panel = parent.find(button.attr("href") || button.attr("data-target"));
    if (panel.hasClass("in")) {
        e.preventDefault();
        e.stopPropagation()
    }
});

Этот код запускается только на аккордеонах, поскольку проверяет атрибут data-parent. Он также не предполагает создание card (или panel для начальной загрузки 3), она использует те же атрибуты, что и bootstrap api.

Я надеюсь, что это помогает.

Ответ 8

В соответствии с версией bootstarp 3.3.6 просто следуйте структуре

<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="panel-group" id="accordion" role="tablist"   aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        collopse 1 body  here 
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        collapse body 2
      </div>
    </div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>