您如何使Twitter Bootstrap手风琴保持开放状态?

我试图通过使用手风琴和折叠插件的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");
})
8个解决方案
73 votes

这是一种简单的方法:

新Bootstrap 3

用于引导程序的JsFiddle 3。

引导程序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();
});

该代码检查clicked元素是否为当前显示的元素(通过“ in”类),如果它确实具有“ in”类,则它将停止隐藏过程。


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

Hugo Dozois answered 2020-08-03T06:04:09Z
9 votes

我想精确@Hugo Dozois的答案

[HTTP://JS fiddle.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();
    }
});
Aelios answered 2020-08-03T06:04:37Z
6 votes

或者您可以使用简单的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"
Heri Hehe Setiawan answered 2020-08-03T06:05:02Z
6 votes

更新于2018

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

引导程序4

[HTTPS://呜呜呜.co的评论员.com/go/BBC超能力0将BB]

// 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://呜呜呜.co的评论员.com/go/YL为944B如果A]

<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类来使手风琴行为起作用)

Zim answered 2020-08-03T06:05:52Z
2 votes

由于所有其他JS答案均不建议使用show.bs.collapse,因此这是我的解决方案,仅使用本机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

chris answered 2020-08-03T06:06:22Z
0 votes

Bootstrap 4.0

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

此代码块检查单击的卡是否折叠(通过查看带有collapse类的div)。 当前该卡为shown时,它将停止传播该事件。

Johannes Filter answered 2020-08-03T06:06:46Z
0 votes

我遇到的情况不适合任何发布的答案:同一页面上的多个手风琴以及不是手风琴的其他一些可折叠组件(没有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相同的属性。

希望对您有所帮助。

kpull1 answered 2020-08-03T06:07:16Z
-1 votes

按照bootstrap 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>

shalini answered 2020-08-03T06:07:36Z
translate from https://stackoverflow.com:/questions/15725717/how-do-you-make-twitter-bootstrap-accordion-keep-one-group-open