在Bootstrap 3手风琴中添加动态闭合面板 [英] Add dynamic closed panels in Bootstrap 3 accordion

问题描述

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

I use Bootstrap 3 accordion and I need to add dynamic panels into it. I have something like this:

+------------------+
| 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 已关闭，则会关闭动态面板。

The issue is that if Panel 2 is opened dynamic panels (cloned from Panel 2) are opened. If Panel 2 is closed, dynamic panels are closed.

我希望关闭所有动态面板，并且只有当它们的标题被点击时将被打开（就像在Bootstrap例子中）。如何修复它？

I want all the dynamic panels to be closed and only when their headers are clicked they will be opened (like in Bootstrap example). How can I fix it?

这是我的jQuery代码。

This is my jQuery code.

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

推荐答案

我刚刚添加了 addClass（ ）

I just added addClass("collapse") on this line:

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

小提琴演示

这篇关于在Bootstrap 3手风琴中添加动态闭合面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！