Question

我正在创建一个自举面板。它有3个面板。面板1，面板2，面板3。这个面板工作正常。

我的逻辑：

当面板1单击时，它会显示面板1的内容，面板2和面板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

活动面板应该位于第一位置

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

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

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

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

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

1 个答案: