1

我试图在另一个列表视图中放置一个包含列表视图的可折叠面板。我几乎得到了它，但无法正确格式化面板的标题，并且它没有与其他列表视图项目成比例地“排列”。

<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>

小提琴：http: //jsfiddle.net/robertfah/UsZUU/

更新

我在这里找到了一个在线示例：http: //jsfiddle.net/Gajotres/m6zVq/，它为我指明了正确的方向。我现在唯一的问题是，如果我设置data-inset="true"第一个<ul>而不是 false，那么<div>可折叠的背景会扩展到列表视图的其余部分。

这是更新的小提琴： http: //jsfiddle.net/robertfah/Skjyf/（对不起，我不知道如何更新我的第一个小提琴并保存它）

4

1 回答 1

4

解决方案

这是您想要实现的目标吗：http: //jsfiddle.net/Gajotres/34LJM/

我已将此 css 添加到您的示例中：

.ui-collapsible .ui-collapsible-content {
    margin: 0 0 !important;
    padding: 10px 0 !important;
}

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。

于 2013-01-24T22:24:53.470 回答