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 */ );