Question

在Bootstrap（v3）中，可以有两个可以切换的div，所以默认显示一个div，一个按钮在两者之间切换，所以总会显示一个div？

感觉像“崩溃”和/或“手风琴”应该能够做到这一点，但......

“折叠”不允许父元素在两者之间切换......

“Accordion”允许隐藏所有面板。

使用一些JQuery可以完成同样的事情，但我想知道是否使用data- *属性可以让我避免使用任何JS。另外，我想尽可能使用标准的Bootstrap类。

Answer 1

您可以使用toggle崩溃方法。

HTML

<button class="btn btn-primary" type="button" id="btn">
   Button
</button>

<div id="grouped">
   <div class="collapse in fade" id="1">
      1. Suspendisse non nisl sit amet
   </div>
   <div class="collapse fade" id="2">
      2. Praesent congue erat at massa
   </div>
</div>

如您所见，第一个是开放的（有in类）。然后使用javascript我们可以切换它们

$("#btn").on("click", function(){
    $("#grouped .collapse").collapse('toggle');
});

注意：fade类是可选的，但在我看来，它看起来更好。

fiddle

没有自定义JavaScript的

更新

<div id="grouped">
   <button class="btn btn-primary" type="button" id="btn" data-toggle="collapse" data-target=".collapse">
     Button
   </button>

   <div class="collapse in fade" id="1">
      1. Suspendisse non nisl sit amet
   </div>
   <div class="collapse fade" id="2">
       2. Praesent congue erat at massa
   </div>
</div>

fiddle

使用折叠/手风琴制作可切换的div

1 个答案: