jquery - 使用折叠/ Accordion 制作可切换的 div

Question

在 Bootstrap (v3) 中，是否可以有两个可简单切换的 div，因此默认显示一个 div，并且有一个按钮在两者之间切换，因此始终显示一个 div？

感觉“折叠”和/或“ Accordion ”应该能够做到这一点，但是......

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

“ 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