Question

我有以下列表结构：

<ul>
    <li>One</li>
    <li>Two
        <ul>
             <li class="active">Two-1</li>
             <li>Two-2</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three-1</li>
        </ul>
    </li>
</ul>

使用以下CSS：

ul li ul{
    display:none;
}
ul li:hover ul{
    display:block;
}

我想要的是：当li类处于活动状态时，整个结构将一直显示，直到显示活动类。

所以在提供的情况下，以及最高级别将显示以下内容：

一
两
- 两1
- 双2
三

如果可能，我想要CSS或jQuery实现（或两者的混合）。

Answer 1

当页面加载时，您可以使用.parents()或:has()显示活动的父母：

$(function() {
  $('.active').parents().show();
  //or..
  $(':has(.active)').show();
});

其中任何一个都可以深入任意多个级别，但第一个级别会更快。

Answer 2

不确定问题的措辞是什么，但这不是你需要的这一行jQuery吗？

$('.active').parent().show().parent().parent().show();

Answer 3

您可以使用:has()选择器：

$("ul:has(li.active)").show();

此选择器会查找具有<ul>类的后代<li>的任何active元素。

Answer 4

有很多方法可以实现这一点，我更喜欢在这里发布的其他人，但这里还有另外两个。

$('li.active').parent().css('display', 'block');
$('ul:parent').has('li.active').css('display', 'block');

它们更具体，仅适用于“列表”。

您也可以使用show（）代替css（'display'，'block'）。一旦元素再次被隐藏，它就会更好地恢复到之前的显示值。

根据类显示隐藏的li

4 个答案: