Jquery mobile 弹出窗口中的jQuery Mobile和嵌套ListView

我有下面的弹出窗口

<div data-role="popup" id="popup-settings" data-transition="slideup" data-theme="c" data-corners="true" data-shadow="true" style="width: 500px; border: 1px solid #A5A5A5;">
    <div data-role="header" class="ui-corner-top" style="border-bottom: 1px solid #A5A5A5;">
        <h1>Settings</h1>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-mini="true" class="ui-btn-right" style="color: #3498DB;">Done</a>
    </div>
    <div data-role="content" style="background-color: #f2f2f2; border: 1px solid #f2f2f2;">

        <ul data-role="listview" data-inset="true">
            <li style="background-color: #f2f2f2">
                <img src="icons/settingsMapping.png" /><h2>Mapping</h2><p>Set mapping framework to use.</p>
                <ul>
                    <li><h2>Slappy</h2></li>
                    <li><h2>Tappy</h2></li>
                </ul>
            </li>
            <li><a href="#"><img src="icons/settingsConnect.png" /><h2>Connection</h2><p>Connect to your Storm V4.0+ Server.</p></a></li>
            <li><a href="#"><img src="icons/settingsPasscode.png" /><h2>Passcode</h2><p>Enter your user name and password.</p></a></li>
            <li><a href="#"><img src="icons/settingsDeveloper.png" /><h2>Developer</h2><p>Developer settings.</p></a></li>
        </ul>
    </div>
</div>

显示时，嵌套的ul始终可见

我看到的是，当你从第一个列表中选择一个列表项时，它会被第二个列表所取代，所有这些都在一个弹出窗口中

---

这可能吗？

有一个嵌套列表插件：，但它在弹出窗口中不起作用。你可以自己编写代码。如果只有两个级别，另一种可能的解决方案是使用可折叠集，其中顶层是一组可折叠的，每个可折叠的都可以展开以显示其子列表。