jQuery Accordion 动态添加更多部分？答案

【问题标题】：jQuery Accordion dynamically add more sections?jQuery Accordion 动态添加更多部分？
【发布时间】：2011-10-13 01:58:35
【问题描述】：

在我的 ASP.net MVC 3.0 上我有一个视图，我有一段代码

<div id="accordion">
    @Html.Action("Action", "Controller")
</div>

@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions
{
UpdateTargetId = "accordion",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "POST"
}, new { @class = "standard button", id = "AddAnother" })

上述代码生成的 HTML 标记将如下所示

<div id="accordion">
<h3><a href="#"> Title</a> </h3>
<div> Body Content </div>
</div>
<a href="Add" id="AddAnother"> Add</a>

我页面上的脚本是这样的

$("#AddAnother").click(function () {
    $("#accordion").accordion('destroy');
        $("#accordion").accordion();
        $("#accordion").accordion("option", "active", ":last");
});

每次单击添加链接时，它都会在主手风琴部分添加另一个 h3/div 部分，如下所示

<div id="accordion">

<h3><a href="#"> Title</a> </h3>
    <div> Body Content </div>

<h3><a href="#"> Title</a> </h3>
    <div> Body Content </div>

<h3><a href="#"> Title</a> </h3>
    <div> Body Content </div>

</div>

我的问题是。何时单击添加链接它经过三个步骤。

1)Destroy accordion

2)Recreate Accordion

3)Add New H3/Div

我不想这样

我要的是按照这个顺序

1) destroy accordion

2) Add new h3/div to the block

3) Recreate Accordion

谁能帮我在我的脚本中纠正这个问题

  $("#AddAnother").click(function () {
    $("#accordion").accordion('destroy');
        $("#accordion").accordion();
        $("#accordion").accordion("option", "active", ":last");
});

【问题讨论】：

标签： jquery jquery-ui dynamic accordion

【解决方案1】：

@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions
{
    UpdateTargetId = "accordion",
    InsertionMode = InsertionMode.InsertAfter,
    HttpMethod = "POST",
    OnBegin = "destroyAccordion",
    OnSuccess = "createAccordion"
}, new { @class = "standard button", id = "AddAnother" })

JS：

function destroyAccordion () {
    $("#accordion").accordion('destroy');
}

function createAccordion() {
    $("#accordion").accordion();
    $("#accordion").accordion("option", "active", ":last");
}

【讨论】：