jquery - 在 jQuery UI 中向 Accordion 小部件动态添加和刷新元素

Question

这里关于 SO 的几个问题引用了这个开放的 jQuery UI 功能请求，以便能够从 Accordion 小部件动态添加/删除面板。票证本身已标记（已关闭功能：已修复），从单元测试和从他们的 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 样式：

Answer 1

unibasil 是正确的，jQuery UI 1.10.0 已经更新了refresh方法现在允许这种行为。

这是关于更新的 1.10.0 变更日志说明。

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

设置

<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展示了您可以即时添加新的手风琴，而不必破坏旧的手风琴。

Answer 2

感谢贾雷克！就我而言，它是否可以在不包含 div 的情况下运行。div 导致创建下一个手风琴。

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

Answer 3

实际上讨论的行为包含在 jQuery UI 1.10.0（刚刚发布）中，对我来说很好用。