Bootstrap 4 Collapse Accordion - 始终打开一个面板

Question

我在手风琴中使用 Bootstrap 4.0 的折叠组件，类似于他们在 docs.

上的组件

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

因此项目 #1 默认展开。然后当您单击项目#3 时，#1 关闭而#3 展开...完美！

但是默认操作是，如果项目 #3 展开并且您单击该标题，面板将关闭并且您只剩下一个标题列表。我想更进一步，如果我们关闭第 3 项，第 1 项将会展开，因此如果没有进行其他选择，'default' 面板将打开。

我看到 Bootstrap3 的 solution 其中一个面板总是打开的，但我希望能够有一个特定的面板（项目 #1）作为面板作为备份打开。这是方便参考的脚本：

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

Answer 1

您可以使用折叠隐藏事件。在这种情况下，使用 .eq(0) 因为 0 是 first 可折叠 div.

的索引

$('.collapse').on('hidden.bs.collapse', function () {
    $('.collapse').eq(0).collapse('show');
})

要更进一步，您可以将新的 default 数据变量添加到父级 #accordion...

<div id="accordion" class="accordion" data-default="1">..</div>

然后更改 jQuery 以使用该变量..

/* default accordion variable method */
$('.collapse').on('hidden.bs.collapse', function () {
  var defaultDiv = $($(this).data("parent")).data("default");
  $('.collapse').eq(defaultDiv-1).collapse('show');
})

演示： https://www.codeply.com/go/NilPIQD9oi

另一种选择是防止任何打开的手风琴自行关闭，正如我 explained in this answer.

Answer 2

你可以试试

jQuery(function($){
    $('[data-toggle=collapse]').on('click', function (e) {
        e.preventDefault();
        if(! $(this).hasClass('collapsed')){
            e.stopPropagation();
            return false;
        }
    });
});

Answer 3

/*------------ You can use attribute selector -------------*/

.card-header h5 button[aria -expanded = 'true'] {
    cursor: not-allowed !important;
    pointer-events: none;
}

Bootstrap 4 Collapse Accordion - 始终打开一个面板

Bootstrap 4 Collapse Accordion - always have one panel open

bootstrap-accordion

bootstrap-4