Question

我正在尝试显示嵌套（子）列表，但是通过“活动”类隐藏父UL和LI，以便子列表看起来像父列表。

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

代码：

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

CSS：

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

小提琴：http://jsfiddle.net/2C8qs

有什么想法吗？

Answer 1

如果您可以在隐藏文字（http://jsfiddle.net/vittore/2C8qs/3/）周围添加范围：

<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;
}

Answer 2

display: none隐藏了该元素及其所有子元素，这是最终的，并且将display: block添加到子元素中将不会再次显示它。

这将隐藏所有子项，.active元素除外：

ul.parent > li {
    display: none;
}

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

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

Answer 3

一个丑陋的CSS技巧：http://jsfiddle.net/2C8qs/4/

我没有使用display none/block，而是使用了text-indent，就像那样：

li {
text-indent: -99999em

}
li.active {
    text-indent: 0
}

请注意，它只适用于内联/文本元素。

Answer 4

我知道这个问题已经很晚了，但我发现了我认为是一个很好的解决方案，并且我认为我会在这里发布它，以供将来可能需要它的人使用。

首先，用<li>包裹所有<p>的孩子（或<div>或其他任何东西，真的没关系），但不包括任何子{{1} }}的。然后，要想要显示的孩子<ul>，请添加一个名为<ul>的班级。示例（我们只想显示SubSubThing列表）：

showing

然后应用此CSS：

<ul>
<li>
    <p>Item</p>
    <ul>
    <li>
        <p>SubItem</p>
        <ul>
        <li>
            <p>SubSubItem</p>
        </li>
        </ul>
    </li>
    </ul>
</li>
<li>
    <p>Thing</p>
    <ul>
    <li>
        <p>SubThing</p>
        <ul class="showing">
        <li>
            <p>SubSubThing1</p>
        </li>
        <li>
            <p>SubSubThing2</p>
        </li>
        <li>
            <p>SubSubThing3</p>
        </li>
        </ul>
    </li>
    </ul>
</li>
</ul>

现在，只有ul>li { list-style:none; } ul>li>p { display: none; } ul.showing>li>p { display:block; } /* Without removing padding and margin, the sublists appear way over to the right */ ul { margin-left: 0px; padding-left: 0px; } li { margin-left: 0px; padding-left: 0px; }的{{1}}的直接后代才会显示<li>类。列表中的其他项目将不使用空格。

要通过CSS轻松获取子列表显示项目符号，并显示不同的子列表，只需使用jQuery在相应的ul上设置showing即可。

希望有所帮助。

Obligatory JSFiddle

Answer 5

所以你不能简单地隐藏第一个li并揭示第二个是因为第二个包含在第一个中 - 你无法揭示和隐藏的元素所包含的元素。

因此，如果将li元素放在您想要隐藏的范围内，则变得容易。我在这里为您创建了一个免费的版本：http://jsfiddle.net/rgpnr6mh/3/

<ul>
  <li><span>Hidden</span>
    <ul>
      <li>Visible</li>
    </ul>
  </li>
</ul>

我假设您不想显示子弹：

ul {
  list-style-type:none
}

li span{
  display: none;
}
li li {
  display: block;
}

如何只显示嵌套的UL并隐藏其父级？

5 个答案: