Twitter-bootstrap崩溃插件 - 如何启用多个"组"?

Rob*_*ous 58 twitter-bootstrap

我正在使用崩溃插件,我想知道如何让多个组同时打开.在他们的演示页面中:

http://twitter.github.com/bootstrap/javascript.html#collapse

只允许一个人在特定时间开放.我想这是手风琴的预期行为,但我怎样才能改变它以便打开一个小组不会使其他小组崩溃?

sod*_*ody 127

只是不要使用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>
Run Code Online (Sandbox Code Playgroud)

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

  • 你有无效的HTML与重复的元素id,工作示例http://jsfiddle.net/esnt6ovr/2/ (7认同)

din*_*ite 11

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

如果您的所有手风琴和乐队都有独特的ID,那么您可以在页面上拥有任意数量的手风琴

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

<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
Run Code Online (Sandbox Code Playgroud)

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

<div class="panel-heading" role="tab" id="headingOne">  
Run Code Online (Sandbox Code Playgroud)

每个正文都需要一个唯一的id,如果适用,还需要引用要使用的标题

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
Run Code Online (Sandbox Code Playgroud)

关于JSFiddle的例子:http://jsfiddle.net/qnhd7Lu3/3/