在jQuery UI的手风琴小部件中动态添加和刷新元素

Question

有几个 SO上的问题 引用了这个开放的jQuery UI功能请求，要求能够从手风琴小部件中动态添加/删除面板。该票据本身标记为（关闭功能：已修复），从我可以看到的单元测试和从他们的Git存储库中拉取的内容来看，它似乎已经在最新版本中实现。

然而，如果我像上面的单元测试一样尝试添加一个div：

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

我无法让它工作。

然而，这种方法 可以工作：

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

但我不想“破坏”手风琴，我只想添加（或预先添加）一个元素并刷新它。

查看我在Chrome检查器中添加的div显示，我添加的元素没有与手风琴的其余部分添加相同的CSS样式：

- Jack

---

在你添加了它之后，就像链接中的示例一样，你必须销毁并重新初始化手风琴才能使其正常工作...因为新添加的元素在手风琴初始化时并不存在。 - wirey00

谢谢Jack，你问了我在解决同样问题时所考虑的完全相同的问题。;) 我同意你的观点--销毁和重新创建手风琴看起来不太好。 - unibasil

Answer 1

unibasil正确指出，jQuery UI 1.10.0已更新refresh方法，现在允许此行为。

以下是有关更新的1.10.0版changelog注释。

刷新方法现在将识别已添加或删除的面板。这使手风琴与选项卡和其他小部件保持一致，它们分析标记以查找更改。

设置

<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

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

示例

jsFiddle 展示了您可以动态添加新手风琴菜单而无需销毁旧菜单。

- Jerry

---

这对我在实现动态部分的可排序/可拖动方面有很大帮助。 - parsh

@Jarek - 在您分享的 jsFiddle 中，有没有办法阻止在动态添加问题后第一个标签/面板被打开？每次添加问题时，都会导致第一个标签打开。我不想要这种行为。所有面板都应处于折叠/关闭状态。有什么想法/建议吗？ - C.P.

这是旧的内容，但为了回答@Chetan，因为我也想要那种行为，请使用active选项，通过添加.accordion("options", "active", 2) <--其中2表示要打开的面板的从零开始的索引。 - LoJo

每次调用refresh()方法时，第一个手风琴都会保持打开状态。有没有解决办法？ - Mukeysh

Answer 2

感谢Jarek的帮助！在我的情况下，不需要用div来包含内容，这会导致创建下一个手风琴。

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});    

- Plch

Answer 3

实际上，讨论的行为已经包含在jQuery UI 1.10.0中（刚刚发布），并且对我来说运作良好。

- unibasil