在 Bootstrap 3 手风琴中添加动态闭合面板
Add dynamic closed panels in Bootstrap 3 accordion
我使用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
问题是,如果打开面板 2,则会打开动态面板(从面板 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());
});
JSFiddle
我只是在这一行添加了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());
});
小提琴演示
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- 如何使用Angular动态添加iframe-src
- 如何向JSON数组动态添加属性
- 动态添加通过json创建的选择项
- 使用jQuery根据动态生成的html动态添加html
- 使用.on动态添加jquery/js不知道的html元素
- JS动态添加字段-删除按钮不起作用
- 动态添加AngularJS脚本
- 将表行动态添加到表或tbody元素中
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 将特定属性动态添加到元素中
- 在highcharts.js中向点弹出窗口动态添加文本
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- 使用jQuery动态添加onClick事件
- 如何在Opencart中动态添加JavaScript
- 剑道UI下载列表:如何动态添加新元素
- 动态添加复选框和输入框 jQuery
- 动态添加哈希标记;t工作
- 将图表动态添加到组合高图表中