jQuery Mobile

Question

我已经花了几天时间尝试构建这个组件，但它根本不想存在。我试图创建一个适合移动设备的树状结构，其中有一个可折叠列表，反过来，它包含更多可折叠，我可以选择任何级别的任何项目。我已经能够单独构建不同的组件，但不能将它们组合在一起。到目前为止，我有：

• Nested list of collapsibles（but no way to select collapsible headers）
• Selectable collapsible headers（but no way to nest aesthetically）
• Filtering through a list+sublists (but shows a box for each level) [less important, I'll just make my own search]

理想情况下，我只需要知道用户点击的最后一项是什么 - 无论是可折叠的标题还是仅仅是叶列表元素。但是，我还需要向用户提供该信息。我已经尝试在运行中更改按钮主题，但由于某种原因会弄乱格式化。我已尝试添加单选按钮，但我似乎无法从可折叠标题中选择/取消选择它们。

每个成功实施的隔离组件都在上面的列表中，其中的部分用括号括起来。

第1部分：可折叠的嵌套列表

<ul data-role="listview" class="ui-listview-outer" data-inset="true">
    <li data-role="collapsible" data-iconpos="left" data-shadow="false" data-corners="false">
        <h3>Birds</h3>
        <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
            <li>Condor</li>
            <li><a href="#">Eagle</a>
            <li data-role="collapsible" data-iconpos="left" data-shadow="false" data-corners="false">
                <h2>Sublist</h2>
                <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
                    <li>Sublistitem 1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

第2部分：可选择的可折叠标题

<ul data-role="listview" data-autodividers="true" data-inset="false" data-filter="true" data-split-icon="check">
    <li> <a style="padding: 0;">
        <div data-role="collapsible" data-inset="false" style="margin: -.7em 0 -.7em 0;">
            <h2>Mark Twain</h2>
            <div>
                 <p>More info</p>
            </div>
        </div>
     </a>
     <a data-theme="c" class="checkButton" id="1"></a>
 </li>