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包含所有切换的日期。

<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>

使用Bootstrap折叠多个数据目标

1 个答案: