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

问题描述

方法现在允许这种行为.

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

<块引用>

刷新方法现在将识别已添加或移除.这使手风琴与选项卡和其他小部件一致解析标记以查找更改.

设置

<div><h3><a href="#">问题 1. 我的第一个问题?</a></h3><div>第一个内容<br/>

<div><button id="addAccordion">添加手风琴</button>

Javascript

$('#addAccordion').click( function() {var newDiv = "<div><h3>Q2 新问题</h3><div>新内容</div></div>";$('.questions').append(newDiv)$('.questions').手风琴("刷新");});

示例

jsFiddle 表明您可以即时添加新的手风琴而无需破坏旧的一.

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.

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");

I can't get it to work.

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.

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 is correct that jQuery UI 1.10.0 has updated the refresh method to now allow this behavior.

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.

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

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

Example

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

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