jquery - 如何使用 bootstrap collapse 制作 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

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

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