twitter-bootstrap - 你如何让 Twitter Bootstrap Accordion 保持一组开放？

Question

我正在尝试使用手风琴和折叠插件使用 Twitter 引导程序来模仿 Outlook 栏，到目前为止，我得到了折叠和手风琴的工作，但它目前允许折叠所有部分。

我想限制它，以便始终显示一个且只有一个。

这是我正在研究的一个：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");
})

Answer 1

这是一个简单的方法：

引导程序 4

$('.accordion .btn-link').on('click', function(e) { 
  if (!$(this).hasClass('collapsed')) { 
    e.stopPropagation(); 
  } 
});

来自评论中的@mr_joncollette

引导程序 3

用于 Bootstrap 3 的JsFiddle 。

引导程序 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

引导程序 2 的JsFiddle。

引导程序 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()将阻止检查后发生的事件。

Answer 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();
    }
});

Answer 3

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 中需要该类才能使手风琴行为起作用）

Answer 4

或者您可以使用简单的 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"

Answer 5

由于所有其他 JS 答案都使用了一个不可取 stopPropagation()的方法，因此我的解决方案只使用了本机 Bootstrap 事件（在 Bootstrap 4 上测试）。

提琴手

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

它利用了点击折叠元素将导致 ashow.bs.collapse后跟 a的事实hide.bs.collapse。而点击打开的元素只会产生一个hide.bs.collapse.

Answer 6

我有一个不适合任何已发布答案的场景：同一页面上的多个手风琴以及其他一些不是手风琴的可折叠组件（没有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对于 bootstrap 3）结构，它使用与 bootstrap api 相同的属性。

我希望它有所帮助。

Answer 7

所提供的解决方案都不允许在同一页面中有多个手风琴，保持或不打开一个选项卡。

这是我的解决方案：

$("[data-toggle=buttons][data-oneopen=true] [data-toggle=collapse]").on("click", function (e) {
  var me = $(this);
  var target = $(me.attr("data-target") || me.attr("href"));
  if (target.hasClass("show")) {
    e.stopPropagation();
  }
});

首先，我选择了一个data-oneopen属性来标记这些手风琴按钮以启用此行为，但它可以替换为类或任何其他选择器。

然后我检查data-target和href属性以找到相关的选项卡。

最后，stopPropagation如果该项目具有show类，只需将其更改为一个in类即可为 Bootstrap 3 提供解决方案。

Answer 8

引导程序 4.0

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

此代码块检查单击的卡片是否折叠（通过查看带有 class 的 div collapse）。当卡当前为shown 时，它会停止传播事件。

Answer 9

引导程序 5

省略data-bs-parent每个属性.accordion-collapse以使手风琴项在打开另一个项时保持打开状态。

Answer 10

Bootstrap-5 的解决方案

$(this).on('mouseenter', function (e) {
    if( !$(this).hasClass('collapsed')) {
        $(this).attr('data-bs-toggle','disabled');
    }
})
$(this).on('mouseleave', function (e) {
    if( !$(this).hasClass('collapsed')) {
        $(this).attr('data-bs-toggle','collapse');
    }
})

希望它可以帮助安德烈亚斯

Answer 11

根据 bootstarp 3.3.6 版本，只需遵循结构

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 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>