我使用的是Bootstrap 3 accordion,我需要在其中添加动态面板。我有这样的东西:
+------------------+
| 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克隆)。如果关闭配电盘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());
});
发布于 2013-09-16 18:59:08
我刚刚在这一行添加了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());
});
https://stackoverflow.com/questions/18825975
复制相似问题