使用 Bootstrap 折叠多个数据目标

Question

我有三个使用 Bootstrap 展开/折叠三个 div 的按钮。但是，如果我连续单击两个不同的按钮，我会得到两个 div 一个接一个展开。是否有可能在一个 div 展开之前，所有其他 div 都被折叠，从而一次只能看到一个 div？

现在，如果我单击按钮 1 展开 Div1，我必须再次单击按钮 1 以折叠 Div1，然后才能单击按钮 2；否则显示 Div1 和 Div2 的内容。

这就是我所拥有的：

<div class="btn-group btn-group-justified">
    <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
        </button>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
        </button>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
        </button>
    </div>
</div>

<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>

Answer 1

因此，您需要使用data-parent="#parentdiv" 将父级设置为toggle，然后让panel 类包含所有toggleddiv。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="parentdiv"class="btn-group btn-group-justified">
  <div class="panel">
  <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group" type="button" data-parent="#parentdiv"  data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
        </button>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
        </button>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-4">
        <button class="btn btn-lg open-group"data-parent="#parentdiv" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
        </button>
    </div>


<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>
</div>
</div>