Question

我正在使用可折叠集制作菜单。它最多有4层深，是一个相当大的菜单。由于我无法显示我的菜单，所以我在这里做了一个非常简单的例子。

第一个是使用listviews，我让它看起来像我想要的菜单，但当你深入到可折叠集时，它不起作用。就像在，如果我扩展一个然后扩展另一个保持扩展，我需要一个在兄弟姐妹打开时关闭。

第二个是使用嵌套的可折叠集，但后来我失去了listview的样式，我的上级就是这样。我试着用：

data-role="collapsible listview"

但是没有运气......任何人对如何充分利用两个世界都有任何想法，或者我必须决定使用listview设置可折叠集的CSS样式，或者使用listview并创建自己的JavaScript模拟可折叠集合（当另一个打开时有一个关闭）？

Answer 1

尝试将您的colapsible和collapsiblesets分离到容器DIV中，并将您的实际列表分成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;
}

更新了 FIDDLE

嵌套使用listviews的collapsibleset

1 个答案: