你如何让推特引导手风琴保持一个群组的开放？

Question

我正在尝试使用Twitter引导和accordion and collapse插件来模拟Outlook栏，到目前为止，我已经让collapse and accordion工作了，但它目前允许折叠所有部分。

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

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

更新2018

下面介绍了如何在引导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>

（注意：Bootstrap 3中需要面板类才能使手风琴行为正常工作）

Answer 2

我想精确地说出雨果·多佐伊的答案

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

下面是一个简单的方法：

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

来自@mr_joncollette的评论

用于引导3的JSFIDLE。

引导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。

引导2的代码：

js prettyprint-override">$('.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（）将阻止检查后发生的事件。