是否有任何方法使用引導可摺疊html屬性使用相同命令打開和摺疊兩個不同元素?引導程序崩潰命令兩個元素具有反摺疊狀態
我有一個複選框,當我檢查它時,我想打開一個可摺疊的div,同時我想關閉另一個。但請記住,這不是真正的手風琴,因爲我沒有兩個指令,但只有一個。
是否有任何方法使用引導可摺疊html屬性使用相同命令打開和摺疊兩個不同元素?引導程序崩潰命令兩個元素具有反摺疊狀態
我有一個複選框,當我檢查它時,我想打開一個可摺疊的div,同時我想關閉另一個。但請記住,這不是真正的手風琴,因爲我沒有兩個指令,但只有一個。
你可以使用Jquery來做到這一點。
在這個例子中,Bootstrap Accordion(complete examples) 他們使用一個按鈕來顯示,另一個用來關閉組件。
以您的情況爲例,您需要捕獲打開的事件,並關閉其他div。
編輯:
在official website有一個例子,嘗試:
在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>
我想用HTML屬性,是不可能性? – Tobia
嘗試在官方網站上,有示例代碼。 – mfruizs2