javascript - jQuery モバイルを使用して複数レベルのナビゲーションを作成するにはどうすればよいですか?

Question

jQuery モバイルを使用してページを作成しようとしています。リストと折りたたみを使用してナビゲーション メニューを作成しようとしています。ナビゲーションの仕組みには、リンクとリンクのコレクションがあります。リンクの各コレクションは、折りたたみ可能なリストに入れられます。

ここにページがあります：

<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>

問題は、リストビューまたはコラプシブルの後に何かを置くと、パディングに問題があり、前の要素にわずかに押し上げられて、その一部が覆われることです。

<br/> here と clear:both hereを使用してみました

可能であれば、リストビューと折りたたみ可能を混在させるのではなく、リストビューを1つだけ使用したいのですが、うまくいきませんでした。