Bootstrap嵌套可折叠面板

Question

我在这里使用此代码（ http://bootsnipp.com/user/snippets/OeaKO ）来实现可折叠的引导程序面板。

我尝试在其中添加其他可折叠面板，但它无法正常工作。

这是嵌套可折叠面板的实际HTML-Code ：

<div class="panel panel-primary">
  <div class="panel-heading clickable">
    <h3 class="panel-title">Online-Shopping Partner</h3>
    <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
  </div>
  <div class="panel-body">

    <div class="panel panel-primary">
      <div class="panel-heading clickable">
        <h3 class="panel-title">Übersicht</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading clickable">
        <h3 class="panel-title">Export</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>

  </div>
</div>

JavaScript/CSS代码与上面'bootsnip'上的代码相同。

Answer 1

在您提供的jQuery代码中，将以下css类添加到“内部”面板：

panel-collapsed

并取代所有出现的

$this.parents

同

$this.closest

工作JS小提琴

Answer 2

您发布的示例中有一些缺少嵌套可折叠面板的内容。 在此页面上查看使用data-xxxx标记识别要折叠的PANEL所需的一些属性：

http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

通过添加这些标签，您可以准确地知道您将要扩展/折叠的DIV。

这是一个已经由其他人发布的工作示例：

http://jsfiddle.net/n2fole00/6JyFr/4/

请注意示例中的data-toggle和href属性

<div class="panel-heading">
  <h4 class="panel-title">
      <a class="panel-toggle" data-toggle="collapse" data-parent="#accordionYear" href="#collapseJune">
          2014
      </a>
  </h4>
</div>

<!-- Here we insert another nested accordion -->
<div id="collapseJune" class="panel-body collapse">
  <div class="panel-inner">


    <div class="panel-group" id="accordionJune">
      <div class="panel panel-default">

        <div class="panel-heading">
          <h4 class="panel-title">
              <a class="panel-toggle" data-toggle="collapse" data-parent="#accordionJune" href="#collapseDay">
                June
              </a>
          </h4>
        </div>