jQuery показать скрытое меню

Question

У меня небольшая проблема.

У меня есть меню, где все <li> должны быть скрыты, но если класс активен, <li> должен показать, что это дети (<ul>)

Родительский заголовок и ссылка все еще должны быть скрыты, но дочерние элементы должны быть показаны. Это НЕ событие onClick.

HMTL:

<ul id="menu">
    <li class="active"><a href="#link1">TITLE</a>   <-- hidden
        <ul>                                        <-- showing
            <li><a href="#sublink1">TITLE</a></li>
            <li><a href="#sublink2">TITLE</a></li>
            <li><a href="#sublink3">TITLE</a></li>
        </ul>
    </li>
    <li><a href="#link2">TITLE</a></li>             <-- hidden
    <li><a href="#link3">TITLE</a></li>             <-- hidden
    <li><a href="#link4">TITLE</a>                  <-- hidden
        <ul>                                        <-- hidden
            <li><a href="#sublink1">TITLE</a></li>
            <li><a href="#sublink2">TITLE</a></li>
            <li><a href="#sublink3">TITLE</a></li>
        </ul>
</ul>

Есть идеи, как сделать это в jQuery?

Answer 1

Добавьте класс к своим заголовкам, например, так:

<a class='active-title'> TITLE </a>

затем, когда вы добавляете активный класс к вашему <li> do:

$(".active .title").hide();
$(".active ul").show();

Если вы не хотите добавлять класс, вы можете использовать:

$(".active > a").hide();
$(".active ul").show();

Answer 2

если родитель скрыт, ребенок тоже будет им.Несмотря на то, что display:block;, чтобы показать оба, вы можете использовать

$('.active').each(function() {
     $(this).toggle();
     $(this).find('ul').toggle();
});