javascript - JQuery UI 添加到 Accordion

Question

Here是 JQuery UI Accordion 小部件的演示。我的页面上有一个，将项目放入其中的方式(如演示页面所示)是这样的:

<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> .我希望能够动态地添加到这个 Accordion 中；然而，当我试图简单地将该结构添加到 Accordion 中时，它不起作用。我查看了我的 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 是否为我们提供了一些不错的函数来为我们做所有这些事情。如果没有，有人可以建议一种不那么烦人的方法吗？

编辑:回应所有建议重新创建 Accordion 的答案:我知道这可能比上面显示的方法更好，但是是否可以“ Accordion ”只需要我需要的 HTML block 而不是到整个 Accordion ，它可以变得很大吗？

Answer 1

只需在向 Accordion 添加新数据时重新创建 Accordion :

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