css - 在菜单中隐藏父级而不是子级

Question

我需要一种隐藏父母<li>但保持孩子<ul>可见的方法。

例如，我有以下代码：

<li class="toplevel">Link
  <ul>
     <li class="secondlevel">Link</li>
  </ul>
<li>

基本上，我希望隐藏顶级类，但可见二级类。现在我知道我可以用 css 做到这一点：

visibility:hidden / visibility:visible

但这保留了隐藏类的高度和宽度。我需要使用的更像是：

display:none / display:inline

但是，当然，这不起作用，因为孩子没有出现，也没有办法让它重新出现。

除了使用可见性隐藏父级但保留子级以使隐藏的父级没有高度/宽度之外，还有其他方法吗？

谢谢。

Answer 1

parent隐藏和显示它是不可能的children。

您可以将要隐藏的顶级链接放入一些内联标记中：

<li class="toplevel"><span>Link</span>
    <ul>
        <li class="secondlevel">Link</li>
    </ul>
</li>

然后，display:none为这个标签设置：

li > span { display: none }