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

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

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

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

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

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

注意示例

中的data-toggle和href属性

closest

Answer 2

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

panel-collapsed

并替换所有出现的

$this.parents

使用

$this.closest

Working JS Fiddle

Bootstrap嵌套可折叠面板

2 个答案: