Question

我有两个div，我想要折叠或扩展。

如果点击按钮A，我想折叠/展开div A. 如果单击按钮B，我想折叠/展开div B.

这是我的代码：

<!-- I define data-target=A -->
<div>
    <div data-toggle="collapse" data-target="#A">
    <strong>More...</strong>
    </div>
</div>

<!-- I define data-target=B -->
<button data-toggle="collapse" data-target="#B">Details</button>


<!-- I define div A -->
<div class="panel-collapse collapse" id="A" role="tabpanel" aria-labelledby="heading-{{ feature.name }}">
    <div><strong>Long description: ...</strong></div>
</div>

<!-- I define div B -->
<div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-{{ feature.name }}">
    Blablabla...
</div>

＆＃34; A＆＃34;工作良好。但是当我想要崩溃/扩展＆＃34; B＆＃34;时，它会同时影响A和B.

有人出了什么问题吗？

Answer 1

您在这里错过"：id=B"。

试试这个：

<div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-{{ feature.name }}">
    Blablabla...
</div>

Answer 2

制作此类型的代码首先为id＆＃39; A＆＃39;之后＆＃39; B＆＃39;你的问题将得到解决。

<div class="row">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#A">Simple collapsible</button>
  <div class="panel-collapse collapse" id="A" role="tabpanel" aria-labelledby="heading-A">
    <div><strong>Long description: ...</strong></div>
  </div>
</div>
<div class="row">
 <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#B">Simple </button>
 <div class="panel-collapse collapse" id="B" role="tabpanel" aria-labelledby="heading-B">
 <div><strong>Long description: ...</strong></div>
</div>

Bootstrap：data-target折叠了几个div

2 个答案: