Javascript 当一个引导处于活动状态时，如何隐藏面板？

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

我的逻辑：

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

• 当面板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>

有什么建议我可以用引导折叠面板来完成吗

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

为了在第一个位置移动活动选项卡，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（“.glyphion-chevron-down”）.removeClass（“glyphion-chevron-down”）.addClass（“glyphion-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'）。不是（$（this.closest（'div.panel-default'））。隐藏（）；
}).on（'hide.bs.collapse'，函数（）{
$（this）.parent（）.find（“.glyphion-chevron-up”）.removeClass（“glyphion-chevron-up”）.addClass（“glyphion-chevron-down”）；
});
$（“#accordion a.accordion-toggle”）。打开（'click'，函数（e）{
if（$（'div.container div.panel-default:visible'）。not（$（this.closest（'div.panel-default'））。length==0）{
var idx=$（this.nexist（'div.panel-default'）.attr（'idx'）；
$（'div.container div.panel-default'）.show（）；
$（this）.closest（'div.panel-default'）.insertAfter（$（'div.container div.panel-default'）.eq（idx））
}
});

小组1内容
小组2内容
小组3内容
我认为单靠bootsrap无法改变面板的顺序。为此，您需要一些额外的javascript来修改面板的显示顺序任何示例脚本？为什么不使用引导折叠JS composant:ok。我可以用。但是，我如何修改我的场景？这不是手风琴而不是面板吗？好的，这是有效的。单击其他Div框时，如何隐藏其他Div框？表示单击面板2时，面板1和面板3应隐藏。我能做这个吗？我不想看到其他的DIV盒子。只有我想看到活动的DIVbox@user2986042您可以使用hide而不是prepend。但是，您认为如何再次显示隐藏面板2？我的目标是：我想将单击的面板移到顶部，而不想显示其他面板（显示：无）。再次单击时，我希望看到第一个视图（默认视图）。我可以使用div id吗？@user2986042代码段已更新。你能测试一下让我知道吗？非常感谢