我认为这可能与我的代码或 css 有关，但我可以在 JSFiddle 中重现它:
<body>
<div data-role="page" id="index">
<div style="padding:20px">
<div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
<div id="output" data-role="collapsible-set" data-inset="true" data-theme="c"></div>
<div>If I use the same content but do not render it dynamically, it is fine:</div>
<div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
<div data-role="collapsible">
<h2>Container 1</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
</div>
<div data-role="collapsible">
<h2>Container 2</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
<li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a>
</li>
<li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a>
</li>
</div>
<div>Why the difference?</div>
</div>
</body>
<script>
$('#output').append('<div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li>');
$('#output').trigger('create');
</script>
每当我在可折叠集上运行 trigger('create') 时，它似乎无法标记需要圆角的第一个 child 和最后一个 child 。
有什么想法吗？我的想法已经用完了，除了在渲染后自己手动应用类之外......
最佳答案
示例:
工作示例:http://jsfiddle.net/Gajotres/2QMk6/
只有当它们是可折叠集合的一部分时，可折叠才会有圆形边框。所以当动态创建2个collapsibleless时你还需要动态创建一个collapsible set。没有它，jQuery Mobile 将创建 2 个基本的可折叠对象，将它们放在可折叠集合中并不重要。
代码:
Javascript:
$('#output').after('<div id="new-collapsible-set" data-role="collapsible-set" data-inset="true" data-theme="c"><div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li></div></div>');
$('#index').trigger('create');
HTML :
<body>
<div data-role="page" id="index">
<div data-role="content">
<div style="padding:20px">
<div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
</div>
<div id="output">If I use the same content but do not render it dynamically, it is fine:</div>
<div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
<div data-role="collapsible">
<h2>Container 1</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
</div>
<div data-role="collapsible">
<h2>Container 2</h2>
<ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
<li>
<a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px">
<img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
<h3 style="font-size:12px;">Template 1</h3>
</a>
</li>
<li>
<a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px">
<img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
<h3 style="font-size:12px;">Template 2</h3>
</a>
</li>
</ul>
</div>
<div>Why the difference?</div>
</div>
</div>
</div>
</body>
关于JQuery Mobile 动态填充的可折叠集丢失圆角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16741048/