我试图将一个包含 ListView 的可折叠面板放在另一个 ListView 中。我几乎明白了,但无法让面板的标题正确格式化,而且它没有与其他 ListView 元素按比例“排列”。
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li role="heading" data-role="list-divider">Options
</li>
<li data-theme="a">
<a href="" data-transition="slide" data-theme="c" data-native-menu = "false">Create Map</a>
</li>
<li data-theme="a">
<a href="#" data-transition="slide" data-theme="c" data-native-menu = "false">Close Map</a>
</li>
<div data-role="collapsible" id="" data-collapsed="false">
<h4>Add Map</h4>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-theme="a">
<a href="" data-transition="slide" data-theme="c" data-native-menu = "false">By ZipCode</a>
</li>
<li data-theme="a">
<a href="" data-transition="slide" data-theme="c" data-native-menu = "false">By Street #</a>
</li>
</ul>
</div>
<li data-theme="a">
<a href="" data-transition="slide" data-theme="c" data-native-menu = "false">View Map</a>
</li>
</ul>
</div>
</div>
fiddle :http://jsfiddle.net/robertfah/UsZUU/
更新
我在这里找到了一个在线示例:http://jsfiddle.net/Gajotres/m6zVq/这给我指明了正确的方向。我现在唯一的问题是如果我设置 data-inset="true"
在第一个<ul>
而不是 false,那么 <div>
的背景这是可折叠的,扩展到 ListView 的其余部分之外。
这是更新后的 fiddle :http://jsfiddle.net/robertfah/Skjyf/ (抱歉,我不知道如何更新我的第一个 fiddle 并保存它)
最佳答案
解决方案
这是您想要实现的目标吗:http://jsfiddle.net/Gajotres/34LJM/
我已将此 css 添加到您的示例中:
.ui-collapsible .ui-collapsible-content {
margin: 0 0 !important;
padding: 10px 0 !important;
}
更多信息
如果您想自己学习如何进行此类更改,您应该查看此 article ,它会教你如何自己做这件事。
关于javascript - 将可折叠面板放在 ListView 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14508941/