如何使用jQuery mobile创建多级导航？

Question

我一直在尝试使用jQuery mobile创建一个页面。 我正在尝试使用列表和可折叠项创建导航菜单。 导航的工作方式是链接和链接集合。 每个链接集合都放在一个可折叠的列表中。

以下是页面：

<div data-role="page">
<div data-role="content">
    <ul data-role="listview">
        <li> <a href="#">Link 1</a>

        </li>
        <li> <a href="#">Link 3</a>

        </li>
    </ul>
    <div data-role="collapsible" data-inset="false">
         <h3>Links inside</h3>

        <ul data-role="listview">
            <li><a href="#">link 5</a>
            </li>
            <li><a href="#">link 6</a>
            </li>
        </ul>
    </div>
    <ul data-role="listview">
        <li> <a href="#">Link 3</a>

        </li>
        <li> <a href="#">Link 4</a>

        </li>
    </ul>
</div>

问题是在listview之后放置任何东西或者可折叠似乎在填充方面存在一些问题，并略微被推到前一个元素中，覆盖了其中一些元素。

我尝试使用＆lt; br /＆gt; here 并且明确：here

如果可能的话，我只想使用一个列表视图而不是混合列表视图和可折叠，但这对我不起作用。