动态添加可折叠元素

Question

来源:http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html 当我手动向我的代码添加这样的元素时,它会正确显示.但是当我尝试使用jQuery添加它时:

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>');

它只显示h3中的标题和它下面的内容,因此不是可折叠元素.我怎样才能解决这个问题？

Answer 1

实现此目的的最简单方法是在动态创建的div上调用collapsible()方法:

$('div[data-role=collapsible]').collapsible();

来源:http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 2

这就是我所做的。希望能帮助到你

HTML

<div id="collapsibleSet" data-role="collapsible-set">
   <div id="ranking1"></div>
</div>

Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>');
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});

htmlRankings() 是一个 js 函数，它返回一些我想要在可折叠 div 中的 html。它可以是这样的

<h3>11</h3>
<span>test</span>

Answer 3

您必须将它们附加到正确的位置（例如在data-role="page"元素下），然后调用.page()以初始化您附加的内容，如下所示：

$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>')
  .appendTo('#someElement').page();

您可以在这里测试一下。