Twitter引導：可摺疊元素中的可摺疊元素

Question

免責聲明優先： 1）有史以來的第一個問題，我希望我做對了，如果不是這樣的話，我很抱歉。 2）英語不是我的母語，所以很抱歉有任何錯誤。 3）進行搜索並找不到答案。

試圖言傳將意味着很多的話而bootply可以說這一切：

基本上，我想除了這幾乎是工作的內容：我想上「的標題，點擊3「（例如，在點擊」標題1「或」標題2「後）隱藏」第一/第二列「，從而僅顯示」第三列「（反之亦然）課程）。我希望這很清楚。

我嘗試了一些事情數據父母（如本：http://www.bootply.com/pgoT2IPG8D具有data-parent="#collapse1"增加了對前三個按鈕），但不能達到什麼...

在此先感謝您的幫助！

Answer 1

爲了得到你想要的東西，你必須設置'data-parent'，但是也要注意這也需要'.panel'類。從文檔：

如果提供了選擇器，則當顯示此可摺疊項目時，指定父項下的所有可摺疊元素將被關閉。 （類似於傳統手風琴的行爲 - 這是依賴於 面板類）

演示：http://www.bootply.com/qhs4dQbFZK

所以，你應該換你可摺疊項目在.panel類（或更改插件）。另請參見：https://github.com/twbs/bootstrap/issues/15341

然後一個可摺疊的項目將外觀，如下圖所示：

<div class="panel">   
    <div class="col-md-2 collapse" id="collapse1"> 
     <div class="btn-group-vertical btn-block" data-toggle="buttons"> 
      <button class="btn btn-default btn-lg" href="">First subtitle column</button> 
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-1"><input type="radio" name="subtitle" id="st11">Subtitle 1-1</button> 
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-2"><input type="radio" name="subtitle" id="st12">Subtitle 1-2</button>  
      <button type="button" class="btn btn-default btn-lg" data-toggle="collapse" href="#collapse1-3"><input type="radio" name="subtitle" id="st13">Subtitle 1-3</button> 
     </div> 
    </div> 
</div> 

您的按鈕應該得到一個data-parent屬性：

<button type="button" class="btn btn-default btn-lg" data-toggle="collapse" data-parent="#menurow" href="#collapse1"><input type="radio" name="title" id="title1">Title 1</button> 

和你的項目應包的ID SET內之前（#menurow）：

<div class="row" id="menurow"></div> 

請注意，.panel類還設置了一些樣式規則，對於您的情況應該取消（撤銷），例如：.panel {margin-bottom: 0;}