Показать скрытые Li на основе класса

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

Что я хотел бы на это: Когда класс лития активен, вся структура до тех пор, пока не отобразится активный класс.

так и в случае при условии, что следующее покажет, наряду с верхнего уровня:

• Один
• Два
  • Two-1
  • Two-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'). Вероятно, лучше, если элемент снова скроется, они вернутся к своему предыдущему отображаемому значению.