0

divAをクリックすると、divAAが下にスライドすることがわかります。divBをクリックすると、divBBが下にスライドします。

メインDIVをクリアし、同じ内容を再度追加すると、次のデモに示すようにアコーディオンが機能しなくなります：http: //jsfiddle.net/p7vUk/2/

なぜそれが機能しなくなるのか、そしてそれを修正する方法を誰かが説明できますか？

4

2 に答える 2

4

これを試してください。

アコーディオンウィジェットをクリアする前にリセットする必要があります。要素に対してすでに初期化されているため、呼び出すだけで.accordion()は機能しません。そのため、メソッドの使用から既存のアコーディオンウィジェットを削除する必要があります。accordion#content#content.accordion('destroy')

function createAccordion(){
    $("#content").accordion({
        active: -1,
        collapsible: true,
        autoHeight: false,
        clearStyle: true
    });
}

$(document).ready(function () {
            createAccordion();                
        });


function clearAndAdd() {
    $("#content").accordion( "destroy" ).empty();
    $("#content").append('<div id="a">DIV ID A</div><div id="aa">DIV ID AA</div><div id="b">DIV ID B</div><div id="bb">DIV ID BB</div>');
    createAccordion();                
}

ここでは、アコーディオンの作成は2回使用する必要があるため、別の方法として抽象化されています。

于 2012-08-09T03:21:45.263 に答える
3

あなたの問題は、アコーディオン機能がそれ自体をアタッチしていた元のDOMオブジェクトを削除するという事実です。新しいものを追加したからといって、同じことを意味するわけではありません。それらは完全に新しい要素であり、そのため、アコーディオン機能を再度実行する必要があります。

だからこれを試してみてください。

function clearAndAdd() {

            $("#content").empty();
            $("#content").append('<div id="a">DIV ID A</div><div id="aa">DIV ID AA</div><div id="b">DIV ID B</div><div id="bb">DIV ID BB</div>');
            $("#content").accordion();
        }

その最後の新しい行が機能しない場合は、代わりにこれを試してください

$("#content").accordion('destroy').accordion();
于 2012-08-09T03:22:24.250 に答える