Bootstrap 4折叠手风琴-始终打开一个面板 [英] Bootstrap 4 Collapse Accordion - always have one panel open

问题描述

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

I'm using Bootstrap 4.0's collapse component in an accordion similar to what they have on their 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展开...完美！

So Item #1 is expanded by default. Then when you click Item #3, #1 closes and #3 expands... Perfect!

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

However the default action is that if Item #3 is expanded and you click that heading, the panel closes and you're left with just a list of headings. I'd like to take it one step further where if we close Item #3, Item #1 would expand so it would be the 'default' panel that would be open if no other selection had been made.

我见过一个解决方案 for Bootstrap3，其中一个面板始终处于打开状态，但是我希望能够有一个特定的面板（项目＃1）作为作为备份打开的面板。这是易于参考的脚本：

I've seen a solution for Bootstrap3 where one panel is always open, but I'd like to be able to have a specific panel (Item #1) as the panel that opens as a backup. This is the script for easy reference:

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

推荐答案

您可以使用折叠隐藏事件。在这种情况下，请使用 .eq（0），因为0是 first 可折叠div的索引。

You can use the collapse hidden event. In this case, use .eq(0) since 0 is the index of the first collapsible div.

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

---

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

---

To take it a step further, you could add a new default data variable to the parent #accordion...

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

然后，更改jQuery以使用该变量。

And, then change the jQuery to use that variable..

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

另一种选择是防止任何打开的手风琴关闭自身，因为我在此答案中进行了解释。

Another option is to prevent any open accordion from closing itself, as I explained in this answer.

这篇关于Bootstrap 4折叠手风琴-始终打开一个面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！