Display hidden li based on class

Question

I have the following list structure:

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

with the following CSS:

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

What I would like is this: When an li class is active, the entire structure down until the active class gets displayed.

so in the case provided the following would show, along with the top level:

• One
• Two
  • Two-1
  • Two-2
• Three

I'd like either a CSS or jQuery implementation (or mixture of the two) if possible.

Answer 1

You can show the active's parents using .parents() or :has() when the page loads like this:

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

Either of these work any number of levels deep, the first would be a bit faster though.