如何在保持嵌套列表可见的同时隐藏嵌套列表的父级？

Question

我希望隐藏嵌套列表的父级，同时保持嵌套列表可见。另外，我不希望父级在隐藏时占用页面上的任何空格。

HTML

<ul>
    <li class="parent">Menu
        <ul class="nested">
            <li>About</li>
        </ul>
    </li>
</ul>

CSS尝试1

.parent {
    display: none;
}
.nested {
    display: block;
}

我无法使用此方法显示嵌套项目。

CSS尝试2

.parent {
    visibility: hidden;
}
.nested {
    visibility: visible;
}

即使你看不到它，父母仍占用了页面上的空间。

是否有第三个选项或我是否必须使用可见性并更改嵌套列表中的边距？

此处提出类似的问题how to hide parent div, keeping inner div visible?但我想确保没有比那里提出的更合适/准确的答案（例如，将一个元素移出另一个元素）和此处（使用可见性）。

Answer 1

正如@paulie_D在上面的评论中所提到的，虽然您可以使用JavaScript将元素拉出或复制然后显示，但您无法使用CSS实现此目的。这是一个例子：

var element = jQuery('.nested').clone();
element.appendTo('ul');

.parent {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="parent">Menu
    <ul class="nested">
      <li>About</li>
    </ul>
  </li>
</ul>

我使用jQuery .clone()函数克隆.nested并将其附加到页面上唯一可见的项目，即<ul>。您还可以根据自己的意愿将其附加到页面上的任何其他可见项目。

Answer 2

这取决于您要查找的确切效果，但在某些情况下，您可以通过将父级定位在屏幕外，然后将孩子放回屏幕上来完成此操作。像这样：

.parent { position:absolute; top:-9999px;}
.nested { position:absolute; top:9999px; }

Answer 3

有一个更好的纯100％CSS解决方案。

1. 使用div嵌入列表树
2. UL的其他样式
3. 仅设置顶级UL（div > ul {}）的样式
4. 基于其他.active等UL类显示/隐藏LIs