在 jQuery UI 中向 Accordion 小部件动态添加和刷新元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13868192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically adding and refreshing elements to the Accordion widget in jQuery UI
提问by Hyman
Severalquestionshere on SO reference this open jQuery UI feature requestfor the ability to dynamically add/remove panels from the Accordion widget. The ticket itself is marked (closed feature: fixed) and from what I can tell from the unit testsand a pull from their Git repository it appears to be implemented in the latest release.
SO 上的几个问题参考了这个开放的 jQuery UI 功能请求，以便能够从手风琴小部件动态添加/删除面板。票证本身被标记（关闭功能：固定），从我从单元测试和他们的 Git 存储库中可以看出，它似乎是在最新版本中实现的。
However if I try to add a div like they did in the unit test above:
但是，如果我像在上面的单元测试中那样尝试添加 div：
var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");
I can't get it to work.
我无法让它工作。
However this methodworks:
但是这种方法有效：
$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();
But I don't want to "destroy" the accordion, I just want to append (or prepend) an element and refresh it.
但我不想“破坏”手风琴，我只想附加（或前置）一个元素并刷新它。
Looking at the div I added in Chrome's inspector shows that the element I added doesn't have the same CSS styling added as the rest of the accordion:
查看我在 Chrome 的检查器中添加的 div 显示我添加的元素没有添加与手风琴其余部分相同的 CSS 样式：
回答by Jerry
unibasil is correct that jQuery UI 1.10.0 has updated the refreshmethod to now allow this behavior.
unibasil 是正确的，jQuery UI 1.10.0 更新了刷新方法，现在允许这种行为。
Here's the 1.10.0 changelognote about the update.
这是关于更新的 1.10.0更新日志说明。
The refresh method will now recognize panels that have been added or removed. This brings accordion in line with tabs and other widgets that parse the markup to find changes.
刷新方法现在将识别已添加或删除的面板。这使手风琴与解析标记以查找更改的选项卡和其他小部件保持一致。
Setup
设置
<div class="questions">
<div>
<h3><a href="#">Question 1. My First Question ?</a></h3>
<div>
First content<br />
</div>
</div>
</div>
<div>
<button id="addAccordion">Add Accordion</button>
</div>
Javascript
Javascript
$('#addAccordion').click( function() {
var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
$('.questions').append(newDiv)
$('.questions').accordion("refresh");
});
Example
例子
jsFiddleshowing that you can add new accordions on the fly without having to destroy the old one.
jsFiddle显示您可以即时添加新的手风琴而无需破坏旧的手风琴。
回答by Plch
Thanks to Jarek! In my case is it functional without enclosing div. The div causes creating next accordion.
感谢贾瑞克！在我的情况下，它可以在不封闭 div 的情况下运行。div 导致创建下一个手风琴。
$('#addAccordion').click( function() {
var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
$('.questions').append(newDiv)
$('.questions').accordion("refresh");
});
