Question

<div id="foo-one">
  <h4 data-toggle="collapse" data-parent="#foo-one" data-target=".bar">
    Collapsible
  </h4>
  <div class="bar collapse" role="tabpanel">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
<div id="foo-two">
  <h4 data-toggle="collapse" data-parent="#foo-two" data-target=".bar">
    Collapsible
  </h4>
  <div class="bar collapse" role="tabpanel">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

同步打开块

演示：http://codepen.io/miloslovesky/pen/RNwYXw

Answer 1

您只需为可折叠元素定义两个不同的ID。看看我的代码修订版。

http://codepen.io/anon/pen/jEOebG

<div id="foo">
  <h4><a data-toggle="collapse" data-parent="#foo" href="#bar-one">
Collapsible
  </a></h4>
  <div id="bar-one" class="bar collapse" role="tabpanel">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
  <h4><a data-toggle="collapse" data-parent="#foo" href="#bar-two">
Collapsible
  </a></h4>
  <div id="bar-two" class="bar collapse" role="tabpanel">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

为什么bootstrap没有工作两个属性＆＃34; data-parent＆＃34;？

1 个答案: