javascript - jQuery 切换菜单下拉菜单

Question

我正在开发一个菜单导航，其父水平条为静态以及与父级交互的垂直 Accordion 子菜单。

我让它们工作正常，除了我想在单击同一父菜单项时切换 show() 和 hide() 子菜单的一部分。

我查看了 toggle() jQuery API，但无法使其正常工作。

下面只是parent部分的脚本，我暂时去掉了toggle()。

$(function () {

    $('#mainMenu > ul > li > a').click(function () {
        $('#mainMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        if ($(this).text() == "1st click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(1)').show();
        } else if ($(this).text() == "2nd click") {
            $('#subMenu > ul').siblings().hide();
            $('#subMenu > ul:nth-child(2)').show();
        }
    });
});

隔离问题的完整代码可用here

Answer 1

这应该可以做到。享受 :) 例如:http://jsfiddle.net/duqQN/4/

$('#mainMenu > ul > li > a').click(function () {
    var position = $(this).parent().index() + 1;
    $('#mainMenu li a').not($(this)).parents('li').removeClass('active');
    $(this).closest('li').toggleClass('active');
    if ($(this).parents('li').hasClass('active')) {
        $('#subMenu > ul').hide();
        $('#subMenu > ul:nth-child('+position+')').show();
    } else {
        $('#subMenu > ul').hide();
    }
});