JQuery UI添加到手風琴

Question

這是JQuery UI的手風琴小部件的演示。 我的頁面上有一個，將項目放入其中的方式（如演示頁面所示）如下：

<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塊而不是整個手風琴，哪個可以變大？

Answer 1

在向其中添加新數據時，只需重新創建手風琴即可：

$("#accordion").append(html).accordion('destroy').accordion();

Answer 2

唯一關鍵的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 */ );