在 Bootstrap 3 手风琴中添加动态封闭面板答案

【问题标题】：Add dynamic closed panels in Bootstrap 3 accordion在 Bootstrap 3 手风琴中添加动态封闭面板
【发布时间】：2013-09-20 11:34:40
【问题描述】：

我使用Bootstrap 3 手风琴，我需要在其中添加动态面板。我有这样的事情：

+------------------+
| Panel 1 (closed) |
+------------------+
| Panel 2 (opened) | <-- This is the template panel
| CONTENT          |
+------------------+
| Dynamic panels   | <-- All dynamic panels must be closed, not opened
+------------------+     after they are added

问题是，如果 Panel 2 被打开，则动态面板（从 Panel 2 克隆）被打开。如果 Panel 2 关闭，动态面板也将关闭。

我希望关闭所有动态面板，并且只有在单击它们的标题时才会打开它们（就像在 Bootstrap 示例中一样）。我该如何解决？

这是我的 jQuery 代码。

var $template = $(".template");

var hash = 2;
$(".btn-add-panel").on("click", function () {
    var $newPanel = $template.clone();
    // I thought that .in class makes the panel to be opened
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + (++hash))
             .text("Dynamic panel #" + hash);
    $newPanel.find(".panel-collapse").attr("id", hash);
    $("#accordion").append($newPanel.fadeIn());
});

JSFiddle

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

我刚刚在这一行添加了addClass("collapse")：

$newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in");

var $template = $(".template");

var hash = 2;
$(".btn-add-panel").on("click", function () {
    var $newPanel = $template.clone();
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + (++hash))
             .text("Dynamic panel #" + hash);
    $newPanel.find(".panel-collapse")
             .attr("id", hash)
             .addClass("collapse")
             .removeClass("in");
    $("#accordion").append($newPanel.fadeIn());
});

Fiddle DEMO

【讨论】：