解决方案

Question

我正在尝试在另一个列表视图中放置一个包含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>

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

更新

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

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

Answer 1

解决方案

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

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

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

将可折叠面板放在列表视图中

1 个答案:

解决方案

更多信息