Question

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

JQuery UI添加到手风琴

2 个答案: