javascript - 如何使用 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 或 collapsible 之后放置任何东西似乎都有一些填充问题，并且被稍微推到前一个元素中，覆盖了其中的一些。

我尝试在这里使用 <br/> 并清除：都在这里

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