使用 jquery 将项目添加到 jQuery Accordion答案

【问题标题】：Add items to a jQuery Accordion with jquery使用 jquery 将项目添加到 jQuery Accordion
【发布时间】：2010-10-28 23:31:37
【问题描述】：

我正在使用 jQuery 手风琴插件来制作一些数据的手风琴。然后我希望用户能够向手风琴添加更多数据。我已经设置了手风琴以使其正常工作，然后我制作了一个函数，将“列表项”添加到与手风琴语义匹配的手风琴前面。

是否可以“更新”手风琴，使其与新添加的元素一起使用，而无需将新数据保存到数据库并刷新页面？

类似这样的：

.accordion('refresh')

或者像 jQuery 1.3 中添加的实时事件，有人知道吗？

【问题讨论】：

jquery 1.10 具有此功能正常工作。以防您 3 年后仍被此问题困扰

标签： ajax jquery-ui jquery-ui-accordion

【解决方案1】：

我还没有测试过，但这应该可以工作：假设您的手风琴编号为 #accordion

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

基本上，只需销毁并重新创建手风琴即可。

更新：

自从编写此答案以来，已将 refresh() 方法添加到手风琴小部件中。可以通过调用来调用：

$( ".selector" ).accordion( "refresh" );

您可以阅读有关此方法的更多信息here

【讨论】：

谷歌了大约十分钟才想到这里。
谢谢 - 这对我有用。一个问题！我正在动态添加一个部分，但是当我重新创建手风琴时，它会再次打开第一部分。有什么办法可以阻止它这样做，并保留以前扩展的部分？再次感谢。
是的，与 DanyW 相同的问题，此代码将打开第一部分
现在我已经有一年没有使用这个了，但是你可以做到的一种方法是命名这些部分（我认为如果你而不是 <a href="#">Paragraph 1</a> 写 <a href="#paragraph1">Paragraph 1</a> in标题并将{navigation:true} 添加到您的选项中
这对我很有效。是否可以添加某种动画/效果来进一步向用户强调手风琴已经更新？

【解决方案2】：

要添加一个新部分，并保持旧部分处于活动状态：

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});

【讨论】：

【解决方案3】：

正如上面 Shahzad 所说，jQuery UI 1.10 让这变得更容易了；见the documentation。

【讨论】：

【解决方案4】：

您可能想查看 LiveQuery 插件：http://plugins.jquery.com/project/livequery

它允许您在加载 DOM 后添加事件和绑定。

【讨论】：

【解决方案5】：

因为我需要一个有效的添加/编辑/删除或手风琴项目，我为此目的破解了这个小的 javascript 函数

http://jsfiddle.net/Sd6fC/

h3 和 div 需要一个符合以下约定的唯一 id

<h3 id="divname_hitm_<uniquenumber>"><h3>

对应的div需要如下

<div id="divname_ditm_<samenumber as h3"></div>

手风琴代码块示例

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

玩得开心，也许它可以帮助一些人！

【讨论】：