Показать скрытый ли в зависимости от класса

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

Для этого можно использовать селектор :has():

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

Этот селектор находит любой элемент <ul> с потомком <li> с классом active.

Answer 3

Не уверен из того, как сформулирован вопрос, но разве эта строка jQuery вам не нужна?

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

Answer 4

Есть много способов добиться этого, я предпочитаю другие, размещенные здесь, но вот еще два.

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

Они более конкретны и будут работать только с «списками».

Вы также можете использовать show () вместо css ('display', 'block'). Вероятно, лучше, когда элемент снова будет скрыт, они вернутся к своему предыдущему значению.