74

私は折りたたみプラグインを使用していますが、複数のグループを同時に開くことができるようにする方法を知りたいです。彼らのデモページで：

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

一度に開くことができるのは 1 つだけです。これはアコーディオンの予想される動作だと思いますが、1 つのグループを開いたときに他のグループが折りたたまれないようにするにはどうすればよいでしょうか?

4

3 に答える 3

168

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/

于 2013-03-29T05:40:07.023 に答える
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/

于 2015-05-10T11:26:07.783 に答える