javascript - 将可折叠面板放在 ListView 中

Question

我试图将一个包含 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 并保存它)

Answer 1

解决方案

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

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

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

更多信息

如果您想自己学习如何进行此类更改，您应该查看此 article ，它会教你如何自己做这件事。