一个引导程序处于活动状态时如何隐藏面板？

Question

我正在创建一个引导面板。 它有3个面板。 面板1，面板2，面板3。 该面板正常工作。

我的逻辑：

• 单击面板1时，它会同时显示面板1和两个面板2的内容，面板3应该隐藏。
• 单击面板2时，它同时显示面板2和面板1的内容，面板3应该隐藏。
• 单击面板3时，将同时显示面板1和面板1的内容，面板2应该隐藏。

但我也想利用空间。 那就是活动面板应该放在首位。 这样我也可以保持空间。 （所有活动面板应排在第一位）

这是我现有的代码：

HTML

<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Panel #1<span class="glyphicon glyphicon-chevron-up"></span>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
      panel 1 content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Panel #2 <span class="glyphicon glyphicon-chevron-up"></span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        panel 2 content
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Panel #3<span class="glyphicon glyphicon-chevron-down"></span>
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        panel 3 content
      </div>
    </div>
  </div>
</div>
</div>

剧本：

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down");
});

有任何建议我如何使用Bootstrap折叠面板完成此操作？

Answer 1

活动面板应排在第一位

为了移动到活动标签的第一个位置，jQuery中的解决方案是：

$('#accordion').prepend($(this).closest('div.panel-default'));

在第一个位置移动时，您可以保存面板的当前位置，以便再次单击该面板（唯一可见）时，可以显示所有面板，并且可以将当前面板放置在正确的位置：

$(this).closest('div.panel-default')
       .insertAfter($('div.container div.panel-default').eq(idx))

因此，该代码段是：

 $('.collapse').on('show.bs.collapse', function () { $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("glyphicon glyphicon-chevron-up"); $(this).closest('div.panel-default').attr('idx', $(this).closest('div.panel-default').index()); $('#accordion').prepend($(this).closest('div.panel-default')); $('div.container div.panel-default').not($(this).closest('div.panel-default')).hide(); }).on('hide.bs.collapse', function () { $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("glyphicon glyphicon-chevron-down"); }); $('#accordion a.accordion-toggle').on('click', function (e) { if ($('div.container div.panel-default:visible').not($(this).closest('div.panel-default')).length == 0) { var idx = $(this).closest('div.panel-default').attr('idx'); $('div.container div.panel-default').show(); $(this).closest('div.panel-default').insertAfter($('div.container div.panel-default').eq(idx)) } }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Panel #1<span class="glyphicon glyphicon-chevron-up"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> panel 1 content </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Panel #2 <span class="glyphicon glyphicon-chevron-down"></span> </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> panel 2 content </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Panel #3<span class="glyphicon glyphicon-chevron-down"></span> </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> panel 3 content </div> </div> </div> </div> </div>