2

这是 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 块而不是整个手风琴，哪个可以变大？

4

2 回答 2

6

只需在向其添加新数据时重新创建手风琴：

$("#accordion").append(html).accordion('destroy').accordion();
于 2013-01-27T00:24:13.263 回答
1

唯一关键的 HTML 是主要结构：

<div id="accordion">
  <h3>Section 1</h3>
  <div></div>
 <h3>Section 2</h3>
  <div></div>
</div>

DIV您可以在内容面板中放置您想要的任何内容。

当您添加一组新的h3anddiv时，销毁并重新创建手风琴：

var newPanel='<h3>New section</h3><div>New content</div>';
$('#accordion').append(newPanel).accordion('destroy').accordion( /* options */ );
于 2013-01-27T00:26:57.923 回答