你如何让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

这是一个简单的方法:

新的Bootstrap 3

JsFiddle for Bootstrap 3.

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"类,它将停止隐藏过程.

弃用的Bootstrap 2

JsFiddle for Bootstrap 2.

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中保持打开状态的方法。这意味着打开的手风琴只能通过切换另一个打开的手风琴来关闭。

引导程序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需要自举3类，以使手风琴行为的工作）

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.