jQuery 显示隐藏菜单答案

【问题标题】：jQuery show hidden menujQuery 显示隐藏菜单
【发布时间】：2012-01-26 21:11:07
【问题描述】：

我有一个小问题。

我有一个菜单，其中所有<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 中实现这一点？

【问题讨论】：

你希望这一切发生在什么时候？

标签： jquery menu navigation hide show

【解决方案1】：

如果父母被隐藏，孩子也会被隐藏。即使它的display:block; 显示两者你都可以使用

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

【讨论】：

我知道。这就是为什么我只想隐藏链接和标题 - 而不是它自己的列表元素。

【解决方案2】：

向标题链接添加一个类，如下所示：

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

然后当您将活动类添加到您的<li> 时：

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

如果不想添加类，可以使用：

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

【讨论】：