如何使用引导折叠生成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>

我有个不工作的小提琴在这里玩

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')
});

小提琴演示