显示隐藏立基于

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

我想是这样的： 当李类处于活动状态，整个结构直到活动类被显示。

所以在壳体中提供的以下将显示，与顶部级别沿着：

• 一个
• 两个
  • 两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(); 

这个选择发现有后代<li>一类的active任何<ul>元素。

Answer 4

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

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

它们更具体，只能用于'列表'。

您也可以使用show（）而不是css（'display'，'block'）。一旦这个元素被隐藏起来，它会恢复到之前的显示值。