使用摺疊/手風琴製作一個可切換的div

在Bootstrap（v3）中可以有兩個div可以切換，所以一個div默認顯示，一個按鈕在兩者之間切換，所以一個div始終顯示？使用摺疊/手風琴製作一個可切換的div

這感覺就像「摺疊」和/或「手風琴」應該是能夠做到這一點，但...

「收起」不允許父元素，兩個之間切換...

「Accordion」允許隱藏所有面板。

同樣的事情可以用一點JQuery來完成，但我想知道是否使用data- *屬性可能會讓我避免任何JS。另外，我想盡可能使用標準的Bootstrap類。

來源

2016-07-14 Dan Gravell

[引導倒裝卡使用CSS3變換（的可能的複製http://stackoverflow.com/questions/30698272/ bootstrap-flip-card-with-css3-transform） –

@ClydeLobo絕對相似，但似乎使用自定義類;我想使用Bootstrap，理想情況下甚至沒有顯式的JS。 –

您可以使用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

來源

2016-07-14 12:28:28 tmg

這工作，謝謝。唯一會更好的是，如果有某種方式沒有JS。也許未來版本的Bootstrap將允許它... –

@DanGravell更新答案，解決方案沒有自定義javascript – tmg

啊，當然，切換切換所有'.collapse' divs，所以'.in'一個消失，另一個出現。：facepalm： –

使用摺疊/手風琴製作一個可切換的div

回答

相關問題