如何使用引导程序崩溃使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