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

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

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

Answer 2

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

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

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

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

如果您不想添加课程，可以使用：

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

jQuery显示隐藏的菜单

2 个答案: