如何使我的引导程序折叠切换互斥？

Question

如果我有两个按钮来切换可折叠卡片，我想在button2展开target1之前进行折叠target2，反之亦然：

<div class="container">
 <div class="btn-group mx-auto">
  <button class="btn" type="button" data-toggle="collapse" data-target="#target1" aria-expanded="false">
    button1
  </button>
  <button class="btn" type="button" data-toggle="collapse" data-target="#target2" aria-expanded="false">
    button2
  </button>
 </div>
</div>
<div class="collapse" id="target1">
 <div class="card card-body">
   ...
 </div>
</div>
<div class="collapse" id="target2">
 <div class="card card-body">
   ...
 </div>
</div>

目前，如果button1和button2被一个接一个地点击，两张卡片都保持展开状态。

谢谢！

Answer 1

您可以使用以下标记来实现此目的。

注意：在撰写本文时 Bootstrap 仍处于beta 3阶段。

<div id="group">
    <div class="container">
        <div class="btn-group mx-auto">
            <button class="btn" type="button" data-parent="#group" data-toggle="collapse" data-target="#target1" aria-expanded="false">
                button 1
            </button>

            <button class="btn" type="button" data-parent="#group" data-toggle="collapse" data-target="#target2" aria-expanded="false">
                button 2
            </button>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target1">
            <div class="card card-body">
                CARD 1
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target2">
            <div class="card card-body">
                CARD 2
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js"></script>

此示例利用了data-parent=".selector"引导程序的功能，您必须在切换按钮上定义该功能。另外，使用上面给出的选择器将可折叠项包装到 div 中。（我#group在这种情况下使用过。）

此外，由于引导程序中的此内置功能存在错误.panel，因此您还必须将可折叠项包装在.

更新：
显然，包装可折叠元素的 div 不一定必须具有该类，但div 不能是该元素的直接子元素.panel仍然很重要。.collapse#group

更新 2：Bootstrap 4.1
的更新标记如下。

<div id="group">
    <div class="container">
        <div class="btn-group mx-auto">
            <!-- Note removed 'data-parent' attribute -->
            <button class="btn" type="button" data-toggle="collapse" data-target="#target1" aria-expanded="false">
                button 1
            </button>

            <button class="btn" type="button" data-toggle="collapse" data-target="#target2" aria-expanded="false">
                button 2
            </button>
        </div>
    </div>

    <div class="panel">
        <!-- Note relocated 'data-parent' attribute -->
        <div class="collapse" id="target1" data-parent="#group">
            <div class="card card-body">
                CARD 1
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="collapse" id="target2" data-parent="#group">
            <div class="card card-body">
                CARD 2
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>