18

SO に関するいくつかの質問は、アコーディオン ウィジェットからパネルを動的に追加/削除する機能について、このオープンな jQuery UI 機能のリクエストを参照しています。チケット自体はマークされており (閉鎖された機能: 修正済み)、単体テストと Git リポジトリからのプルからわかることから、最新のリリースで実装されているようです。

ただし、上記の単体テストで行ったように div を追加しようとすると:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

私はそれを働かせることができません。

ただし、この方法は機能します。

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

しかし、私はアコーディオンを「破壊」したくありません。要素を追加 (または先頭に追加) して更新したいだけです。

Chrome のインスペクターで追加した div を見ると、追加した要素に、残りのアコーディオンと同じ CSS スタイルが追加されていないことがわかります。

ここに画像の説明を入力

4

3 に答える 3

35

jQuery UI 1.10.0 でrefreshメソッドが更新され、この動作が可能になったという unibasil の指摘は正しいです。

更新に関する1.10.0 変更ログのメモは次のとおりです。

refresh メソッドは、追加または削除されたパネルを認識するようになりました。これにより、アコーディオンは、マークアップを解析して変更を見つけるタブやその他のウィジェットと一致します。

設定

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

例

jsFiddleは、古いアコーディオンを破棄することなく、その場で新しいアコーディオンを追加できることを示しています。

于 2013-01-23T18:59:22.203 に答える
7

ジャレクに感謝！私の場合、divを囲まなくても機能します。div により、次のアコーディオンが作成されます。

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});
于 2014-01-15T12:14:59.747 に答える
1

実際に議論された動作は、jQuery UI 1.10.0 (リリースされたばかり) に含まれており、私にとっては問題なく動作します。

于 2013-01-18T05:14:33.017 に答える