引導程序崩潰命令兩個元素具有反摺疊狀態

Question

是否有任何方法使用引導可摺疊html屬性使用相同命令打開和摺疊兩個不同元素？

我有一個複選框，當我檢查它時，我想打開一個可摺疊的div，同時我想關閉另一個。但請記住，這不是真正的手風琴，因爲我沒有兩個指令，但只有一個。

Answer 1

你可以使用Jquery來做到這一點。

在這個例子中，Bootstrap Accordion（complete examples） 他們使用一個按鈕來顯示，另一個用來關閉組件。

以您的情況爲例，您需要捕獲打開的事件，並關閉其他div。

編輯：

在official website有一個例子，嘗試：

Answer 2

在example他們使用id官方網站。但是，您可以使用class，它可以分配給多個元素。

<div class="bs-example"> 
    <p> 
    <a class="btn btn-primary collapsed" role="button" data-toggle="collapse" href=".collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
     Link with href 
    </a> 
    <button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target=".collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
     Button with data-target 
    </button> 
    </p> 

    <div aria-expanded="true" class="collapseExample collapse in" style="height: 0px;"> 
    <div class="well"> 
     Initially shown block of text. 
    </div> 
    </div> 
    <div aria-expanded="false" class="collapseExample collapse" style="height: 0px;"> 
    <div class="well"> 
     Initially hidden block of text. 
    </div> 
    </div> 
</div> 

注重爲collapse和collapse in爲不同的元素。他們描述初始狀態。所以，如果你想要一個元素最初顯示，另一個隱藏，那麼你應該分配相應的不同的初始狀態。

如果你想與複選框相同的行爲只是取代它的按鈕：

<div class="bs-example"> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" data-toggle="collapse" href=".collapseExample" aria-expanded="false" aria-controls="collapseExample"> Check me out 
    </label> 
    </div> 

    <div aria-expanded="true" class="collapseExample collapse in" style="height: 0px;"> 
    <div class="well"> 
     Initially shown block of text. 
    </div> 
    </div> 
    <div aria-expanded="false" class="collapseExample collapse" style="height: 0px;"> 
    <div class="well"> 
     Initially hidden block of text. 
    </div> 
    </div> 
</div>