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

引导程序 5

省略每个.accordion-collapse 上的data-bs-parent 属性，以使折叠项在打开另一个项时保持打开状态。

Answer 3

这是一个简单的方法：

引导程序 4

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

来自 cmets 中的@mr_joncollette

引导程序 3

JsFiddle 用于 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”类，则停止隐藏过程。

---

已弃用的引导程序 2

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

Answer 4

所提供的解决方案均不允许在同一页面中拥有多个手风琴，无论是否打开一个 选项卡。

这是我的解决方案：

$("[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 5

我有一个不适合任何已发布答案的场景：同一页面上有多个手风琴，以及其他一些不是手风琴的可折叠组件（没有 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 6

由于所有其他 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 7

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

另外，see this answer 展示了如何指定一个“默认”手风琴，当所有其他手风琴都关闭时，该手风琴将打开。

---

引导程序 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 到 make the accordion behavior work 需要 panel 类）

Answer 8

引导 4.0

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

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

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>

Answer 10

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

我想准确地回答@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();
    }
});