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

引导程序的折叠插件不支持该功能。相反，需要一些自定义编码。我通过创建两个按钮并在点击处理程序上添加特定内容来解决问题。还添加了一个可从第二个按钮控制的内部可折叠元素。第二个按钮文本根据跟踪第二个按钮状态的数据属性进行更改检查片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何使用bootstrap崩溃使3个状态

2 个答案: