2

これは、 JQueryUIのアコーディオンウィジェットのデモです。私のページに1つあり、アイテムを入れる方法（デモページに表示されているように）は次のようになります。

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

すべてのアイテムについて、次の構造があることに注意してください<h3>Title</h3><div><p>Text</p></div>。このアコーディオンに動的に追加できるようにしたいと思います。しかし、その構造をアコーディオンに単純に追加しようとすると、機能しませんでした。Chromeコンソールを調べたところ、JQueryがあらゆる種類のクラスとプロパティをアイテムの見た目が悪い要素に追加していることがわかりました。さて、もちろんこれを解決する明白な方法は、追加する代わりに追加<h3>Title</h3>することです

<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-lessonlist-header-0" aria-controls="ui-accordion-lessonlist-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Title</h3>

そして、他のすべての要素についても同様です。これは正常に機能するはずですが、見た目は醜く、JQueryがこれらすべてのことを実行するための優れた関数を提供してくれているのではないかと思いました。そうでない場合、誰かがこれを行うためのより厄介な方法を提案できますか？

編集：アコーディオンを再作成することを提案するすべての回答に応えて：それはおそらく上記の方法よりも良いアイデアだと思いますが、全体ではなく、必要なHTMLのブロックのみを「アコーディオン」することは可能ですアコーディオン、これはかなり大きくなる可能性がありますか？

4

2 に答える 2

6

新しいデータを追加するときに、アコーディオンを再作成するだけです。

$("#accordion").append(html).accordion('destroy').accordion();
于 2013-01-27T00:24:13.263 に答える
1

重要な HTML は主な構造のみです。

<div id="accordion">
  <h3>Section 1</h3>
  <div></div>
 <h3>Section 2</h3>
  <div></div>
</div>

DIVコンテンツ パネル内には何でも入れることができます。

との新しいセットを追加するh3とdiv、アコーディオンを破棄して再作成します。

var newPanel='<h3>New section</h3><div>New content</div>';
$('#accordion').append(newPanel).accordion('destroy').accordion( /* options */ );
于 2013-01-27T00:26:57.923 に答える