来源：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 中显示标题及其下方的内容，因此不是可折叠元素。 我该如何解决这个问题？
【问题讨论】：
实现这一点的最简单方法是在动态创建的 div 上调用 collapsible() 方法：
$('div[data-role=collapsible]').collapsible();
来源：http://forum.jquery.com/topic/dynamically-add-collapsible-div
【讨论】：
这就是我所做的。希望对你有帮助
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>
【讨论】：
我觉得
设置 innerhtml 后，只需在其上触发一个事件即可呈现如下所示的动态 contnet
$('#<divId or elementId').trigger("create");
【讨论】：
此代码适用于 perl，您可以针对任何编程语言对其进行修改。
<a href="javascript:collapsible('$div_instance','$imageID')">
<IMG id='$imageID' SRC='$imagePath' alt='(Expand / Collaspe Section' title='Expand / Collaspe' width=10 height=10>
$display_header <br/></a>
<div id=$div_instance name=$div_instance
style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;">
<-- your content -->
</div>
<script language="JavaScript" type="text/javascript">
<!--
function collapsible(theID,imageID) {
var elemnt = document.getElementById(theID);
var imageObject =document.getElementById(imageID);
if(elemnt.style.display == 'block') {
elemnt.style.display ='none';
imageObject.src='images/expand_icon.gif';
}
else{
elemnt.style.display ='block';
imageObject.src='images/expand_icon_down.gif';
}
}
// -->
</script>
参考号：http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html
【讨论】：
从 jquery mobile beta2 开始，您会触发一个事件 - .trigger('create')
【讨论】：
您可以使用以下代码刷新可折叠文件
$('#element').collapsibleset('refresh');
希望对你有帮助
【讨论】：
您必须将它们附加到正确的位置（例如，在 data-role="page" 元素下）然后调用 .page() 来初始化您附加的内容，如下所示：
$('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>')
.appendTo('#someElement').page();
【讨论】：
比可折叠更好的是更新布局，it is in the docs。总之……
此事件由框架内动态显示/隐藏内容的组件触发，是一种通用机制，用于通知其他组件可能需要更新其大小或位置。在框架内，该事件在其内容被显示/隐藏的组件元素上触发，并且一直冒泡到文档元素。
$('div[data-role=collapsible]')
.trigger( 'updatelayout' );
//.collapsible();
【讨论】：
通过这种方式，您可以动态地将小型可折叠项添加到较大的项中。 HTML：
<div data-role="collapsible" data-mini="false" data-theme="b" >
<h3>main header text</h3>
<div id="aCollaps"></div>
</div>
Javascript
//Your could do for(){
$("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' +
'<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>');
//}
//You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles
$('div[data-role=collapsible]').collapsible({refresh:true});
【讨论】：
这是我为动态更改折叠式所做的示例。我有一些需要显示为标题的数组，然后我需要在每个可折叠集合中使用一个网格，其中包含 2 个边，一个用于问题，一个用于回答。
var inputList = '';
var count = 0;
var divnum = 999;
var collit = 'false';
inputList += '<div data-role="content">';
inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">';
$.each(fbFullStrArray, function(index, item) {
//set questions and answers for each appt
getsetApptFback(fbStrApptArray[index]);
//write the html to append when done
inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">';
inputList += '<h3>'+fbFullStrArray[index]+'</h3>';
inputList += '<div id="g'+divnum+'" class="ui-grid-a">';
inputList += '<div id="gb'+divnum+'" class="ui-block-a">';
inputList += '<div id="fbq'+index+'"><ol>';
$.each(fbQidArray, function(ind,it) {
inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>';
});
inputList += '</ol></div></div>'
inputList += '<div id="ga'+divnum+'" class="ui-block-b">';
inputList += '<div id="fba'+index+'"><ul>';
$.each(fbQidArray, function(ind,it){
inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>';
});
inputList += '</ul></div></div></div></div>';
collit = "true";
divnum++;
count++;
});
inputList += '</div></div>';
$('#fb_showings_collapse [role=collapsible-set]').text('');
$('#fb_showings_collapse [role=collapsible]').text('');
if (count > 0) {
$('#fb_showings_collapse [role=collapsible]').remove();
$('#fb_showings_collapse').append(inputList).collapsibleset('refresh');
}
else if (count == 0){
inputList = 'Sorry! No Showings To Show Feedback For!';
$('#fb_showings_collapse [role=collapsible-set').remove();
$('#fb_showings_collapse [role=collapsible]').text(inputList);
}
【讨论】：
见enhanceWithin()函数：jQuery Mobile docs: enhanceWithin
在代表您的 DOM 元素父级的 jQuery 对象上调用 enhanceWithin 以将任何 jQuery Mobile 功能添加到您的 HTML。
在这种情况下：
jQuery('[data-role="collapsible"]').parent().enhanceWithin();
请注意，如果您要添加多个 jQuery Mobile 小部件，您可能只想在添加所有动态 HTML 后在诸如“BODY”之类的祖先上调用 enhanceWithin。
这对于这个问题也是一个很好的解决方案：Refresh a section after adding HTML dynamically to jquery mobile
【讨论】：