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

Posted 2023-05-09

【中文标题】带有列表视图的嵌套可折叠集

【英文标题】：nested collapsibleset with listviews

【发布时间】：2015-11-14 08:29:30

【问题描述】：

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

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

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

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

data-role="collapsible listview"

但没有运气......任何人都知道如何两全其美，或者我必须决定使用列表视图设置可折叠集的 CSS 样式还是使用列表视图并创建我自己的 javascript模拟可折叠的集合（当另一个打开时关闭）？

【参考方案1】：

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

【讨论】：

感谢您的回复！我也在考虑这一点，但我担心它会弄乱深度，所以如果我想让第 2 层的列表项比第 3 层更暗或更缩进（以表示不同的层），这将使它看起来像列表视图中的项目与作为兄弟的可折叠项内的项目的 ul>li 深度相同。但实际上，它看起来像是手动修改 CSS 之外的最佳解决方案，所以我想我可以让它工作！另外，我会给你一个赞成票，但遗憾的是我没有 15 名声望这样做。 :(

另外，半相关的问题，我应该像我的网站一样设计我的 jsfiddle，我的网站从第一个 collapsibleset 开始使用 ul 和 li，所以看起来你的方法会有listview 使一个 ul 成为另一个 ul 的直接子级。这会引起问题吗？ jsfiddle.net/shellwe/30jLxrt0/5

@shellwe，你应该把 ul 放在一个 li 中。要缩进，只需从 CSS 中删除 .ui-collapsible-content：jsfiddle.net/ezanker/30jLxrt0/6

另一条评论，我想我可以将子 ul 包裹在一个 li 中，所以它会是 ul.collapsibleset>li>ul.listview，不确定这是否是最佳做法，但感觉很奇怪让 ul 成为 ul 的直接子代