Bootstrap 4.0

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

这是一种简单的方法：

New Bootstrap 3

对于Bootstrap 3，

JsFiddle。

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”类，它将停止隐藏过程。 / p>

弃用的Bootstrap 2

对于Bootstrap 2，

JsFiddle。

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()会阻止检查后发生的事件。

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

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

2018年更新

以下是如何在Bootstrap v3或v4中保持至少开放状态。这意味着开放式手风琴只能通过切换另一个来关闭。

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

此外，see this answer显示了如何指定＆＃34;默认＆＃34;当所有其他人都关闭时，手风琴会打开。

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

（ 注意： 在Bootstrap 3中需要panel类到make the accordion behavior work）

Answer 5

其他所有JS答案都使用inadvisable 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，后跟hide.bs.collapse。而点击打开的元素只会产生hide.bs.collapse。

Answer 6

所提供的解决方案均不允许在同一页面上打开多个手风琴，而不打开一个 tab 。

这是我的解决方案：

$("[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属性以找到相关的 tab 。

最后我stopPropagation如果该项目具有show类，只需将其更改为in类即可获得Bootstrap 3的解决方案。

Answer 7

Bootstrap 4.0

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

此代码块检查点击的卡是否已折叠（通过查看类collapse的div）。当卡片当前为show时，它会停止propagating the event。

Answer 8

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

希望对您有帮助。

Answer 9

根据bootstarp 3.3.6版本，just follow structure

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

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

9 个答案:

New Bootstrap 3

弃用的Bootstrap 2

Bootstrap 4.0