顯示隱藏立基於

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'）。一旦這個元素被隱藏起來，它會恢復到之前的顯示值。