Javascript jQuery切换菜单下拉列表

我正在处理一个菜单导航，它的父水平条是静态的 以及一个与父菜单交互的垂直手风琴子菜单

除了一个部分，我想在单击同一父菜单项时切换子菜单

show（）

和

hide（）

我已经查看了

toggle（）

jQuery API，但无法使其正常工作

下面仅是我现在去掉的

toggle（）

部分的

parent

脚本

$(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();
        }
    });
});

---

隔离问题的完整代码可用

我对小提琴进行了如下修改：

$(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 如果（$（this）.text（）=“第一次单击”） 如果（$（this）.text（）=“2st click”）

---

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

我认为这可能会帮助您：（在show+More或+less之间切换）

$（“#lnkMore”）。单击（函数（）{

$（“#divMore”）。滑动切换（“慢速”）； $（this）.text（$（this.text（）==$（“#hidLess”）.text（）？$（“#hidLess”）.text（）：$（“#hidLess”）.text（））； 返回false； });

这应该可以。享受：）例如：

---

好吧，在搞乱了你那乱七八糟的代码之后，我明白了

使

checkElement

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

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

代码真的很混乱，不应该像现在这样具体，只要我有时间，我就会回到它并尝试使它更简单。给你：

对于“活动”检查，只需对“li.active”进行常规查找，如果找到，则将其删除

编辑：以下是混合代码的代码：

---

希望这有帮助

谢谢你的意见，但这不是我想要的。此代码会堆叠子菜单项，无法正确切换。我的代码在切换子菜单方面做得很好，我想在单击同一父菜单项时添加切换。@SeongLee刚刚注意到我的答案不是您想要的，抱歉。将代码与Stuart Kershaw的代码混合在一起，因此更好：D

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