Twitter-bootstrap崩溃插件-如何启用多个“组”打开?


Answers:


156

只是不要使用data-parent属性:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/


8
您的HTML无效,带有重复的元素ID,工作示例jsfiddle.net/esnt6ovr/2
sody

12

对于依赖于每个面板展开/折叠并允许每个页面上有多个手风琴的解决方案。

如果您的所有手风琴和组都具有唯一的ID,那么您可以在页面上根据需要设置任意数量的手风琴

每个手风琴都需要一个唯一的ID:

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

每个标题都需要一个唯一的ID

<div class="panel-heading" role="tab" id="headingOne">  

每个机构都需要一个唯一的ID,如果适用,请参考要使用的标题

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

JSFiddle上的示例:http : //jsfiddle.net/qnhd7Lu3/3/


关于此代码段中发生的事情,您的答案根本不清楚。请说清楚。
jpaugh

@jpaugh更好吗?
dinamite

是。但是,我有一个问题:巨大的代码块最后展示了什么?每个可折叠元素的行为方式似乎都一样……这使“通过测试”和“失败测试”这
两个字

@jpaugh我将示例代码放在JSFiddle上,可折叠的元素的行为应相同。只有当不同的组件共享id时,它们才会混乱,这会使javascript混乱,通常导致与您单击的折叠/展开面板不同的面板
dinamite

1
$('#multipleOPened').on('click', function() {
  if($(this).is(':checked')) {
    $('#accordion .collapse').removeAttr('data-parent');
  } else {
    $('#accordion .collapse').attr('data-parent','#accordion');
  }
});

在JSFiddle上使用引导程序4的示例:https ://jsfiddle.net/tw1j7Lf3/7/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.