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();