javascript - 如何在一个 Bootstrap 处于事件状态时隐藏面板？

Question

我正在创建一个 Bootstrap 面板。它有 3 个面板。面板 1、面板 2、面板 3。该面板正常工作。

我的逻辑:

• 当点击面板 1 时，面板 1 和面板 2 都显示面板 1 的内容，面板 3 应该隐藏。
• 当点击面板 2 时，面板 2 的内容与面板 1 一起显示，面板 3 应该隐藏。
• 当点击面板 3 时，面板 3 的内容与面板 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

the active panel should come first position

为了将事件选项卡移动到第一个位置，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>