Bootstrap 嵌套可折叠面板答案

【问题标题】：Bootstrap nested collapsable panelsBootstrap 嵌套可折叠面板
【发布时间】：2016-08-23 06:00:30
【问题描述】：

我在这里使用此代码 (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'-link 上的代码相同。

【问题讨论】：

“不起作用”不是一个技术术语。 “不起作用”是什么意思？
当父面板向下滑动时，子“可折叠”面板已经“打开”（位置向下滑动）。取而代之的是，它们应该位于初始位置（向上滑动）并且在单击时，在其标题或“+”上它们应该向下滑动。它们应该具有与父面板相同的功能。现在，当我单击子面板的标题时，整个面板向上滑动（父面板也是..）。但我希望只有被点击的孩子在点击时向上/向下滑动。如前所述，它们应该具有与可折叠父面板完全相同的功能。
你解决了吗？或者您仍然需要这方面的帮助？

标签： javascript html css twitter-bootstrap panel

【解决方案1】：

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

panel-collapsed

并替换所有出现的

$this.parents

有

$this.closest

Working JS Fiddle

【讨论】：

感谢您的回答！几乎正确.. 当父面板向下滑动时，子面板应该关闭（向上滑动），并且在单击标题时必须明确打开。

【解决方案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>

【讨论】：

我使用的面板不是默认面板。它们是自定义的可折叠面板。请看一下代码，并尝试在 bootsnipp 上预览它，这样你就明白我的意思了。
您是指 UI 意义上的自定义？如果是这种情况没关系，您无论如何都需要指定行为。如果按照惯例，您的意思是您正在处理所有事情，那么这是一个完全不同的故事。当我尝试打开 bootsnipp 页面时，我得到一个登录窗口。
panel-group 是这里的关键。如果您在面板主体内添加面板，请务必先用panel-group 包围它们