我怎样才能在嵌套列表中显示某个级别？ （响应式网页设计）

Question

我正在尝试设计一个响应式页面，其中移动视图仅显示所选级别及其相应的子级，而桌面视图将显示所有级别和相应的子级。这甚至可能吗？

这就是顶级应该是这样的：

On mobile＆amp;桌面（级别0）：

• 顶级（选择和展示）
  • 二级（显示）
  • 二级（显示）

现在这是一个有点棘手的地方：

在移动设备上（第1级）：

• 顶级（隐藏）
  • 第二级（选择和显示）
    • 第三级（显示）
  • 第二级（隐藏）

在桌面上（级别1）：

• 顶级（显示）
  • 第二级（选择和显示）
    • 第三级（显示）
  • 二级（显示）

我尝试过使用 <ng-container [ngSwitch]="true"> <div *ngSwitchCase="foo === 1">First</div> <div *ngSwitchCase="bar === 2">Second</div> <div *ngSwitchDefault>Third</div> </ng-container> ，但这并不完全正常，因为隐藏的元素仍然会中断DOM的流程。想法？

编辑：这里有一些代码来显示问题（尽管它与上面呈现的标记基本相同）在桌面断点上我希望以下所有标记都显示：

visibility: hidden

但是，在移动断点上，我只希望显示以下标记片段：

<ul>
    <li>
        <span>Top Level</span>
        <ul>
            <li>
                <span>Second Level</span>
                <ul>
                    <li><span>Third Level</span></li>
                    <li><span>Third Level</span></li>
                </ul>
            </li>
            <li>
                <span>Second Level</span>
            </li>
        </ul>
    </li>
</ul>

Answer 1

visibiility: hidden使元素不可见，但它仍占用空间。

你想要display:none;。最好将它从DOM中删除。

编辑：现在我明白了。这是可能的，但会有一些问题要死。您可以隐藏顶级列表项中的<span>。你显然需要对ul的填充做一些事情。

<ul>
    <li>
        <span class="hideme">Top Level</span>
        <ul>
            <li>
                <span>Second Level</span>
                <ul>
                    <li><span>Third Level</span></li>
                    <li><span>Third Level</span></li>
                </ul>
            </li>
            <li>
                <span>Second Level</span>
            </li>
        </ul>
    </li>
</ul>

CSS：

li {
  list-style: none;
}
@media (max-width : 768px) {
  .hideme {
    display: none;
}

Fiddle