Bootstrap：展開其他部分

我正在製作Rails應用，並試圖實現與Twitter的Bootstrap collapse相關的特定功能。正如我解釋的那樣忍受着我。Bootstrap：展開其他部分

我目前有以下幾種觀點：

enter image description here

當點擊這些按鈕，它們的數據切換的div擴大。該視圖設置如下：

<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button> 
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button> 
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button> 

    <div class="collapse indent" id="keys"> 
     <!--content--> 
    </div> 

    <div class="collapse indent" id="attrs"> 
     <!--content--> 
    </div> 

    <div class="collapse" id="edit"> 
     <!--content--> 
    </div>

我讓他們像這樣設置，因爲我想要按鈕並排連續排列。如果我將按鈕移動到視圖正上方，它們展開/摺疊，然後按鈕堆疊在另一個之上。

所以，我的最終目標是並排放置三個按鈕，讓它們摺疊並展開各自的部分。目前的設置工作，但是有點尷尬。例如，如果有人展開鍵部分，然後展開屬性部分，則必須在鍵部分下方滾動。

這個問題有兩種可能的解決方案。一個是按下一個按鈕會導致另一個按鈕崩潰。這意味着在任何時候，這些部分中只有一個被擴展。

更好的解決方案，我認爲應該是這樣的，當按鍵展開時，右邊的按鈕向下移動到按鍵div的底部，當屬性展開時，編輯細節按鈕移動到該div的底部。這可能嗎？我已經試圖做到這一點，讓按鈕堆疊在一起，並通過CSS來改變它們的相對位置，但是這並不起作用，因爲當其中一個部分被展開時，其他按鈕結束了擴大部分的中間。

最後，我想嘗試在沒有twitter引導頁面上提到的手風琴風格行爲的情況下做到這一點，但如果有人能夠從設計角度讓我相信這是更可取的，那麼我當然會重新考慮。

來源

2012-07-13 finiteloop

你進去看了'數據parent'屬性..？ – Sherbrow 2012-07-13 19:51:35

不，但我會和我會回來，讓你知道這是否有幫助。謝謝！ – finiteloop 2012-07-13 20:35:46

這對我沒有用。我不確定，我可能做錯了什麼。任何幫助仍將不勝感激。 – finiteloop 2012-07-13 20:52:16

使用data-parent，第一溶液是粘在示例性選擇器架構

<div id="myGroup"> 
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button> 
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button> 
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button> 

    <div class="accordion-group"> 
     <div class="collapse indent" id="keys"> 
      keys 
     </div> 

     <div class="collapse indent" id="attrs"> 
      attrs 
     </div> 

     <div class="collapse" id="edit"> 
      edit 
     </div> 
    </div> 
</div>

Demo (jsfiddle)

第二種解決方案是結合所述事件和自己隱藏其他可摺疊的元件。

var $myGroup = $('#myGroup'); 
$myGroup.on('show.bs.collapse','.collapse', function() { 
    $myGroup.find('.collapse.in').collapse('hide'); 
});

Demo (jsfiddle)

PS：在演示奇效由min-height組爲示例引起的，就忽略這個問題。

編輯：改變了JS事件從show到show.bs.collapse如Bootstrap documentation指定。

來源

2012-07-13 22:32:18 Sherbrow

「data-parent」信息在實現這一功能方面是非常寶貴的。謝謝！ – finiteloop 2012-07-16 17:41:52

對我而言，那個'

...

'是失蹤的一塊。簡單地使用'data-parent'並沒有幫助。我在bootstrap的文檔中沒有看到'accordion-group'類的要求。謝謝！ – Srinidhi 2013-04-13 14:57:09

@Srinidhi關於這個選擇器的全部內容：[。> .accordion-group> .in'（在github上的src）]（https://github.com/twitter/bootstrap/blob/master/js/bootstrap-collapse .js＃L59） – Sherbrow 2013-04-13 16:15:19

如果你堅持按照Bootstrap慣例的HTML結構和適當的選擇器，你應該沒問題。

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
     </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
     </h4> 
     </div> 
     <div id="collapse2" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
     </h4> 
     </div> 
     <div id="collapse3" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
</div>

DEMO

來源

2016-05-09 13:55:52 cptstarling

準確的答案我期待.. – TheRumboJumbo 2016-07-18 11:38:26

此信息是正確的，但不是他的問題的答案，因爲上面的解決方案將每個部分都放在其標題下，而他需要將所有標題一起顯示，然後在其內容之間切換。 – 2016-07-18 13:06:32

論文打字員... – 2017-09-20 19:33:42

的正確方法爲我工作：

var lanopt = $(".language-option"); 

lanopt.on("show.bs.collapse",".collapse", function(){ 
    lanopt.find(".collapse.in").collapse("hide"); 
});

來源

2017-01-08 09:35:30

如果你不想改變你的標記，這個功能做的伎倆：

jQuery('button').click(function(e) { 
    jQuery('.collapse').collapse('hide'); 
});

每當單擊按鈕時，所有部門離子變得崩潰。然後引導程序打開你選擇的那個。

來源

2017-03-27 15:31:31

這個通用的解決方案對我來說工作得非常好。我不想使用一個典型的手風琴團隊，這是完美的。謝謝！ – 2017-06-05 17:59:20

什麼是（e）'在這裏？ – Nofel 2017-08-30 09:39:06

@Nofel e = eventObject您可以使用它 - 例如 - 以這種方式防止默認的點擊行爲：e.preventDefault（）; – 2017-08-30 09:58:24

引導3由內容

.panel-heading { 
 
    display: inline-block; 
 
} 
 

 
.panel-group .panel+.panel { 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
.panel { 
 
    border: 0 !important; 
 
    -webkit-box-shadow: none !important; 
 
    box-shadow: none !important; 
 
    background-color: transparent !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a> 
 
    </h4> 
 
</div>

引導3例如與內容

.panel-heading { 
 
    display: inline-block; 
 
} 
 

 
.panel-group .panel+.panel { 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
.panel { 
 
    border: 0 !important; 
 
    -webkit-box-shadow: none !important; 
 
    box-shadow: none !important; 
 
    background-color: transparent !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
    </h4> 
 
</div> 
 
<div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a> 
 
    </h4> 
 
</div> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
</div>

以上通過側鍵側的下方側按鍵與側示例

來源

2017-05-24 11:37:58

如果使用的是引導4，你不想改變你的標記：

var $myGroup = $('#myGroup'); 
$myGroup.on('show.bs.collapse','.collapse', function() { 
$myGroup.find('.collapse.show').collapse('hide'); 
});

來源

2017-09-04 22:17:23 Aberm

Bootstrap：展開其他部分

回答

相關問題