如何使用引導程序崩潰使3個狀態

Question

我想讓我的按鈕做打開和摘要狀態，然後關閉按鈕將關閉它。

首先點擊將在總結打開（如可能爲一個特定的高度只是爲了顯示摘要），並在第二次點擊將充分打開DIV，然後一個單獨的按鈕/鏈接關閉它們：

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    link to open/summary 
</a> 
<a class="pull-right" href="#">close button here</a> 

<div class="collapse" id="collapseExample"> 
    <div class="well"> 
     This is My summary section 
     <br><br><br> 
     if you see this then its a fully opened state 
    </div> 
</div> 

我有一個非工作fiddle在這裏玩

Answer 1

該功能沒有被引導的崩潰插件支持。 相反，一些自定義編碼是必需的。我通過創建兩個按鈕並添加了特定的點擊處理程序來解決這個問題。還添加了一個可從第二個按鈕進行控制的內部可摺疊元素。第二個按鈕的文本在跟蹤第二個按鈕狀態的數據屬性的關係變化檢查片段：

$('#summaryBtn').on('click',function(e){ 
 
    $this = $(e.target); 
 
    $this.addClass('hidden'); 
 
    $('#moreBtn').removeClass('hidden'); 
 
}); 
 
$('#close').on('click', function(){ 
 
    $('#collapseExample, #collapseExample > .collapse').collapse('hide'); 
 
    $('#moreBtn').addClass('hidden'); 
 
    $('#summaryBtn').removeClass('hidden'); 
 
}); 
 
$('#moreBtn').on('click', function(e){ 
 
    $this = $(e.target); 
 
    isMore = $this.data('more'); 
 
    var thisText = (isMore) ? 'Less... ' : 'More... ';  
 
    $this.empty().text(thisText); 
 
    $this.data('more', !isMore); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<a class="btn btn-primary" id="summaryBtn" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
 
     link to open/summary 
 
    </a> 
 
    <a class="hidden btn btn-primary" id="moreBtn" data-toggle="collapse" href="#more" aria-expanded="false" aria-controls="more" data-more="true"> 
 
     More... 
 
    </a> 
 
    <a class="pull-right" id="close" href="#">close button here</a> 
 
    
 
    <div class="collapse" id="collapseExample"> 
 
     <div class="well"> 
 
      This is My summary section 
 
      <div class="collapse" id="more"> 
 
      if you see this then its a fully opened state 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

您可以添加另一個摺疊內容與read more鏈接。

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    link to open/summary 
</a>  

<div class="collapse" id="collapseExample"> 
    <div class="well"> 
     This is My summary section 
    <a class="" data-toggle="collapse" href="#collapseSummaryExample" aria-expanded="false" aria-controls="collapse?SummaryExample"> 
    Read More... 
</a><div class="collapse" id="collapseSummaryExample"> 
     <a class="pull-right close" href="#">[x]</a> 
    <div class="alert alert-info"> 
    if you see this then its a fully opened state 
    </div> 
</div> 

    </div> 
</div> 

JS

$('a.close').on('click', function(){ 
    $('.collapse').collapse('hide') 
}); 

Fiddle Demo