带有列表视图的嵌套折叠集

Question

我正在用一个可折叠的集合做一个菜单。它将有多达4层深，是一个相当大的菜单。因为我不能显示我的菜单，所以我在这里做了一个非常简单的例子。

http://jsfiddle.net/shellwe/30jLxrt0/3/

第一个是使用listviews，我让它看起来像我想要的菜单，但当你深入到一个级别时，可折叠集就不起作用了。例如，如果我先展开一个，然后再展开另一个，两个都保持展开，当一个同级打开时，我需要一个关闭。

第二个方法是使用嵌套的可折叠集合，但是这样我就失去了listview的样式，而我的上级喜欢这样做。我试着使用：

data-role="collapsible listview"

但是没有运气..。有没有人知道如何两全其美，或者我必须决定是用listview设置可折叠集的样式，还是用listview创建我自己的JavaScript来模拟可折叠集(一个关闭，另一个打开)？

Answer 1

尝试将您的colapsibles拆分到容器DIVs中，将您的实际列表拆分到UL中：

<div id="mainMenu" data-role="collapsibleset" data-inset="false">
    <div data-role="collapsible">        
        <h3>using DIV CollapsibleSet</h3>
        <div data-role="collapsibleset" data-inset="true">
            <div data-role="collapsible">                
                <h3>level 2 set 1</h3>
                <ul data-role="listview" data-inset="false">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
            </div>
            <ul data-role="listview" data-inset="false">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
            <div data-role="collapsible">                
                <h3>level 2 set 2</h3>
                <ul data-role="listview" data-inset="false">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

ul, [data-role="collapsible"], .ui-collapsible-content {
    padding:0 !important;
    margin:0  !important;
}
#mainMenu {
    margin:2em;
}

更新了