1

我有一个列表菜单，其中包含一些 JavaScript 代码，可以使其折叠和展开.onClick。

虽然我只能让它显示 1 个项目，因为每次我尝试像for循环这样的新解决方案时，或者case我无法让它工作。

这是我当前的代码：

<ul id="navigation">
    <li class="main"><a>Diagonóstico</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na compra de qualquer serviço) </a></li>
    <li class="main"><a>Hardware</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha2"> › Instalação/Configuração de Periféricos </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha3"> › Limpeza interna/externa </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha4"> › Cooling Pack </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha5"> › Performance Pack </a></li>
    <li class="main"><a>Software</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so1"> › Actualização de Sistema Operativo </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so2"> › Instalação de Sistema Operativo </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so3"> › Instalação de Drivers e Aplicações </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so4"> › Configurações de internet e redes wireless </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_so5"> › Legalize o seu PC </a></li>
    <li class="main"><a>Backup</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba1"> › Backup de dados até 4GB </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba2"> › Backup and Go </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba3"> › Suportes Danificados </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ba4"> › Recuperação de dados sem intervenção física </a></li>
    <li class="main"><a>Segurança</a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se1"> › Remoção de Vírus e Spyware </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se2"> › Instalação de anti-vírus </a></li>
    <li class="sub"><a href="javascript:void(0);" class="sub_se3"> › Configurações de Controlo Parental </a></li>
</ul>

$(function () {
    $("li.sub:not(:first)").hide();
    $("li.main a").click(function () {
        $("li.sub").slideUp("fast");
        $(this).parent("li.main").next("li.sub").slideDown("slow");
    });
});

这是它的jsFiddle。

我正在考虑一个for循环，该循环一直贯穿每个子菜单类别，例如：

for(var i=1; i<5; i++) {
    $(this).parent("li.main").next("li.sub_ha" + i).slideDown("slow");
}

然后为每个主菜单执行此操作，为每个主菜单提供一个类menu1,menu2,menu3等。

4

3 回答 3

1

这应该这样做：

$(this).parent().parent().find("li.sub").slideDown("slow");
于 2013-04-17T22:41:53.453 回答
1

next只选择被选元素的下一个兄弟，可以使用nextUntilmehod.

$(this).parent().nextUntil("li.main").slideDown("slow");

http://jsfiddle.net/ruf6z/

$(function() {
    var $subitems = $("li.sub");
    $subitems.not(':first').hide();

    $("li.main a").click(function() {
        var $targets = $(this).parent().nextUntil("li.main").slideDown("slow");
        $subitems.not($targets).slideUp("fast");
    });
});

http://jsfiddle.net/ruf6z/1/

于 2013-04-17T22:55:57.327 回答
1

在语义上这样做会更好。如果你想说课程，我建议给每组孩子自己的班级。您可以搜索子项的类，然后使用该类查找子组中的所有内容，然后.slideDown()在该组上运行该方法。

我制作了你的小提琴的修改版本，展示了如何做到这一点。

于 2013-04-17T22:56:01.603 回答