0

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

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

第一个是使用列表视图，我让它看起来像我想要的菜单方式，但是当你深入一层时，可折叠集不起作用。例如，如果我扩展一个然后扩展另一个都保持扩展，我需要一个在兄弟打开时关闭。

第二个是使用嵌套的可折叠集，但后来我失去了列表视图的样式和我的上司这样的样式。我尝试使用：

data-role="collapsible listview"

但是没有运气......任何人都对如何获得两全其美有任何想法，或者我是否必须决定使用 listview 设置可折叠集的 CSS 样式，或者使用 listview 并创建我自己的 JavaScript 来模拟可折叠套装（当另一个打开时关闭）？

4

1 回答 1

0

尝试将您的可折叠和可折叠集分离到容器 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

于 2015-08-20T16:39:00.983 回答