2015-09-21 25 views
0

是否有任何方法使用引導可摺疊html屬性使用相同命令打開和摺疊兩個不同元素?引導程序崩潰命令兩個元素具有反摺疊狀態

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

回答

0

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

在這個例子中,Bootstrap Accordioncomplete examples) 他們使用一個按鈕來顯示,另一個用來關閉組件。

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

編輯:

official website有一個例子,嘗試:

+0

我想用HTML屬性,是不可能性? – Tobia

+0

嘗試在官方網站上,有示例代碼。 – mfruizs2

1

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> 

注重爲collapsecollapse 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>