Display hidden li based on class

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.

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.

Not sure from the way the question is phrased, but isn't this line of jQuery all you need?

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

You can use the :has() selector for this:

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

This selector finds any <ul> element that has a descendant <li> with a class of active.

There are so many ways to achive this, i prefer the others posted in here but here are another two.

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

They are more specific and will work only on 'lists'.

You can also use show() instead of css('display', 'block'). Its probly better coz once the element is hidden again they get back to its previous display value.