jQuery Accordion动态添加更多部分？ [英] jQuery Accordion dynamically add more sections?

问题描述

在我的ASP.net上MVC 3.0
我有一个View看起来我有一段代码

On my ASP.net MVC 3.0 I have a View looks in that i have a section of code

<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标记将如下所示

The Generated HTML markup for the above code will look like this

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

我的页面上的脚本就像这样

Script i have on my page is like this

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

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

Every time if Add link is clicked it adds another h3/div section to with in the main accordion section as bellow

<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>

我的问题是。
点击添加链接时点击
它会经历三个步骤。

My Problem is. when ever add link is clicked it goes through three steps.

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

任何人都可以帮我纠正这个问题

Can any one help me to correct this in in my scrip

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

推荐答案

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

这篇关于jQuery Accordion动态添加更多部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！