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

Several questions在这里参考这个 open jQuery UI feature request,以便能够从手风琴小部件中动态添加/删除面板.机票本身被标记(封闭功能：固定),从 unit tests可以告诉我们,并从他们的Git仓库中拉出来,似乎是在最新版本中实现的.

但是,如果我尝试添加像上面的单元测试中那样的div：

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

我不能让它上班

但this method的作品：

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

但是我不想“破坏”手风琴,我只想附加(或预加)元素并刷新它.

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

解决方法

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

这是关于更新的1.10.0 changelog注释.

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.

建立

<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显示您可以在飞行中添加新的手风琴,而无需摧毁旧的手风琴.