Question

我正在进行菜单导航，其父级水平条为静态以及与父母交互的垂直手风琴子菜单。

我让他们工作得很好，除了我想在点击同一父菜单项时切换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();
    }
});

Answer 2

我修改了那个小提琴：

$(function () {

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


    $('#subMenu > ul > li > a').click(function () {
        $('#subMenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#subMenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});

我只使用了一个if / else in if（$（this）.text（）==“1st click”） 和 if（$（this）.text（）==“第二次点击”）。

我希望这就是你想要的。但我认为有更好的方法可以用更少的代码来实现它。

Answer 3

我认为这可能会帮助你:(在show + More或+ Less之间切换）

$（“＃lnkMore”）。click（function（）{

$（ “＃divMore”）的slideToggle（ “慢”）。 $（this）.text（$（this）.text（）== $（“＃hidLess”）。text（）？$（“＃hidMore”）。text（）：$（“＃hidLess”）。text （））; 返回false; }）;

Answer 4

好的，所以过了一段时间搞乱了你真正凌乱的代码，我明白了。

使checkElement成为一个全局变量（在函数之外定义它，因此存储在其中的值可以在其他函数中重用）并检查它是否存在。

     if(undefined != checkElement ){
            checkElement.slideUp('normal');
    }

代码非常混乱，不应该像它那样具体，只要我有时间，我会回到它并尝试使其更简单。在这里：http://jsfiddle.net/duqQN/7/

对于“有效”检查，只需查看“li.active”，如果找到则删除。

编辑：以下是与Stuart Kershaw's代码混合的代码：http://jsfiddle.net/duqQN/9/

希望这有帮助！

jQuery切换菜单下拉列表

4 个答案: