0

我正在开发一个菜单导航，该菜单导航具有作为静态的父水平条和与父交互的垂直手风琴子菜单。

我让它们工作正常，除了在单击同一个父菜单项时我想要切换的部分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();
        }
    });
});

隔离问题的完整代码可在此处获得

4

4 回答 4

2

这应该这样做。享受:) 示例：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();
    }
});
于 2013-10-17T21:27:36.230 回答
0

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

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

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

代码真的很乱，不应该那么具体，每当我有时间我会回到它并尝试使它更简单。给你：http: //jsfiddle.net/duqQN/7/

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

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

希望这可以帮助！

于 2013-10-17T21:52:26.100 回答
0

我像这样修改了小提琴：

$(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 ($(this).text() == "1st click") 和if ($(this).text() == "2st click")中又使用了一个 if/else 。

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

于 2013-10-17T21:14:47.730 回答
0

我认为这可能会对您有所帮助：（在显示 +More 或 +Less 之间切换）

$("#lnkMore").click(function() {

$("#divMore").slideToggle("slow"); $(this).text($(this).text() == $("#hidLess").text() ? $("#hidMore").text():$("#hidLess").text ()); 返回假；});

于 2013-10-17T21:15:17.097 回答