在jQuery UI中向Accordion小部件动态添加和刷新元素 [英] Dynamically adding and refreshing elements to the Accordion widget in jQuery UI

问题描述

几个

Several questions here on SO reference this open jQuery UI feature request for 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 tests and a pull from their Git repository it appears to be implemented in the latest release.

但是，如果我尝试像在上面的单元测试中一样添加div:

However if I try to add a div like they did in the unit test above:

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

我无法正常工作.

但是此方法有效:

However this method works:

$("#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.

看一下我在Chrome的检查器中添加的div，发现我添加的元素没有与其余的手风琴添加相同的CSS样式:

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:

推荐答案

unibasil是正确的，因为jQuery UI 1.10.0已更新

unibasil is correct that jQuery UI 1.10.0 has updated the refresh method to now allow this behavior.

这是关于更新的1.10.0 更改日志注释.

Here's the 1.10.0 changelog note about the update.

刷新方法现在可以识别已添加的面板或 删除.这使手风琴与标签和其他小部件保持一致 解析标记以查找更改.

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 表明您可以动态添加新的手风琴而不必销毁旧的手风琴一.

jsFiddle showing that you can add new accordions on the fly without having to destroy the old one.

这篇关于在jQuery UI中向Accordion小部件动态添加和刷新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！