如何只显示一个嵌套的UL而隐藏它的父级？

Question

我试图显示一个嵌套的（子）列表，但是通过一个“活动”类隐藏父ULs和LIs，以便子列表看起来像父列表。

带有“active”类的列表不可见，因为它从其父类继承了display：none。

代码：

<ul>
    <li>
        Hidden
        <ul>
            <li class="active">Visible</li>
        </ul>
    </li>
</ul>

CSS：

li {
    display: none;
}
li.active {
    display: block;
}

小提琴:http://jsfidle.net/2c8qs

有什么想法吗？

Answer 1

display:none隐藏元素及其所有子元素，这是最终的，将display:block添加到子元素将不会使其再次可见。

这将隐藏除.active元素以外的所有子元素：

ul.parent > li {
    display: none;
}

ul.parent > li.active {
    display: block;
}

编辑：哎呀，我把问题看错了。但是，如果将其他内容包装在元素中，则可以执行与上述类似的操作。

Answer 2

如果可以在隐藏文本(http://jsfidle.net/vittore/2c8qs/3/)周围添加span:

<ul>
    <li>
        <span>Hidden</span>
        <ul>
            <li class="active">Visible</li>
        </ul>
    </li>
</ul>


li span, li li {
    display: none;
}
li li.active {
    display: block;
}