46

jQuery アコーディオン プラグインを使用して、データのアコーディオンを作成しています。次に、ユーザーがアコーディオンにさらにデータを追加できるようにします。アコーディオンが適切に機能するようにセットアップし、アコーディオンのセマンティクスに一致するアコーディオンに「リスト項目」を追加する関数を作成しました。

新しいデータをデータベースに保存してページを更新せずに、新しく追加された要素で動作するようにアコーディオンを「更新」することは可能ですか?

このようなもの：

.accordion('refresh')

または、jQuery 1.3 で追加されたライブ イベントのようなものですが、誰か手がかりがありましたか?

4

5 に答える 5

100

私はそれをテストしていませんが、これはおそらくうまくいくはずです: ID #accordion のアコーディオンを持っているとしましょう

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

基本的に、アコーディオンを破棄して再作成するだけです。

アップデート：

この回答が書かれて以来、refresh() メソッドがアコーディオン ウィジェットに追加されました。次のように呼び出すことで呼び出すことができます。

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

この方法の詳細については、こちらをご覧ください

于 2009-05-26T13:33:59.160 に答える
8

新しいセクションを追加し、古いセクションをアクティブのままにするには：

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});
于 2012-05-24T11:29:18.607 に答える
6

上で Shahzad が述べたように、jQuery UI 1.10 ではこれがより簡単になりました。ドキュメントを参照してください。

于 2013-02-19T17:38:30.663 に答える
0

動作する追加/編集/削除のアコーディオンアイテムが必要だったので、この目的のためにこの小さな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>

楽しんでください多分それはそこにいくつかのpplを助けます！

于 2012-08-13T14:24:51.827 に答える
0

LiveQuery プラグインを参照してください: http://plugins.jquery.com/project/livequery

DOM のロード後にイベントとバインディングを追加できます。

于 2009-05-26T13:33:15.447 に答える