多个下拉菜单，一个JQuery脚本

我一直在玩由Skyrocket实验室开发并由Peter Hinton改进的jDiv下拉菜单。只要使用不同的标识符（nav1触发器、hidden-menu1、nav2触发器、hidden-nav2等）复制代码，它就可以很好地用于同一页面上的多个菜单

我正在尝试整理如何重写代码，以便它能够“发现”悬停的navX链接的数值，并触发相应的隐藏navX div。

试试看

function doNav(id) {
    var hide = false;
    $(id).hover(function() {
        if (hide) clearTimeout(hide);
        $("#hidden" + id).show();
    }, function() {
        hide = setTimeout(function() {
            $("#hidden" + id).hide();
        });
    });

    $("#hidden" + id).hover(function() {
        if (hide) clearTimeout(hide);
    }, function() {
        hide = setTimeout(function() {
            $("#hidden" + id).hide();
        });
        $("#hidden" + id).stop().show();
    });
}

for (var i = 1; i < 4; i++) {
    doNav("nav" + i);
}

函数doNav（id）{
var hide=false；
$（id）.悬停（函数（）{
如果（隐藏）clearTimeout（隐藏）；
$（“#隐藏”+id）.show（）；
}，函数（）{
hide=setTimeout（函数（）{
$（“#隐藏”+id）.hide（）；
});
});
$（“#隐藏”+id）.悬停（函数（）{
如果（隐藏）clearTimeout（隐藏）；
}，函数（）{
hide=setTimeout（函数（）{
$（“#隐藏”+id）.hide（）；
});
$（“#隐藏”+id）.stop（）.show（）；
});
}
对于（变量i=1；i<4；i++）{
多纳夫（“导航”+i）；
}

这是一个正在工作的

我删除了所有ID，只是为了说明代码和功能是多么简单和分条，只需使用类即可。
如果需要使用ID，可以撤消ID，但所有ID保持不变

如果您需要关于代码的解释，我可以注释每一行

以下是新的/更改的Jquery：

$(document).ready(function() {

    var countNavs = 0; $('#navlist li').attr('class', function() {countNavs++;return 'connected' + countNavs;});
    var countDrops = 0; $('.dropdown').attr('class', function() {countDrops++;return 'dropdown connected' + countDrops;});

    var hide1 = false;            
    $("#navlist li").hover(function(){    
        var equal = $(this).attr('class');

        $('.active').removeClass();
    if (hide1) clearTimeout(hide1);
        $('.dropdown').hide();
        $('.'+equal).not('li').show();
        $(this).children('a').toggleClass('active');                
    }, function() {
        hide1 = setTimeout(function() {$('.'+equal).not('li').hide();});
    });

    $('.dropdown').hover(function(){        
        if (hide1) clearTimeout(hide1);            
    }, function() {            
        hide1 = setTimeout(function() {$('.dropdown').hide();});
        $('.active').removeClass();        
        $('.dropdown').stop().show();
    });

});

与

---

为了帮助您用几句话理解：我们会自动向每个“li”及其名为“.connectedN”的共同响应者“dropdown”添加一个相同的自定义类，
其中“N”是一个递增的数字。
然后我们只会说：如果悬停的“li”是类“connected3”，这意味着我们只悬停了第三个“li”，我们将打开具有相同类的“.下拉列表”

hide1也会发生变化。将鼠标悬停在#nav2上，需要将结束值更新为nav2、hidden-nav2、hide2等@Tom您可以为每个nav调用此函数。它们都使用一个本地

hide

变量。好的，那么我是否只需为每个触发器添加额外的doNav？即：

doNav（“nav2”）；多纳夫（“nav3”）@Tom非常喜欢。可以使用数组。更新了答案。@Tom如果它解决了您的问题，请单击我的答案旁边的复选标记；）谢谢你，但是我们现在使用了一个相当广泛的弹出式菜单，我现在正试图简化和减少代码的大小。这4行代码可以处理数百个无限多的菜单。我只想向您展示基本功能。其原理是鼠标激活此动作元素。其余的都嵌套到该元素.childrens或.next等等on@roXon，谢谢你。jDiv函数很好，因为它使用两个单独的div来保持触发器和目标的分离，而您使用列表的示例将它们放在一起。使用单独的divs特性，我可以将大部分导航代码移到文件的底部，并避开搜索机器人程序，从而将内容推到文件的更高位置。还允许我将导航代码从主文件中剥离出来，并通过JQuery的load函数将其添加进来，从而允许更快的初始加载。这就是为什么我只想减少jDiv的代码量，但我还没能让@Raynos版本正常运行。我没能用谷歌搜索jDiv，因为它看起来已经被移动/关闭了。所以我不知道。。。这是一张关于什么的照片。你有链接吗？
$(document).ready(function() {

    var countNavs = 0; $('#navlist li').attr('class', function() {countNavs++;return 'connected' + countNavs;});
    var countDrops = 0; $('.dropdown').attr('class', function() {countDrops++;return 'dropdown connected' + countDrops;});

    var hide1 = false;            
    $("#navlist li").hover(function(){    
        var equal = $(this).attr('class');

        $('.active').removeClass();
    if (hide1) clearTimeout(hide1);
        $('.dropdown').hide();
        $('.'+equal).not('li').show();
        $(this).children('a').toggleClass('active');                
    }, function() {
        hide1 = setTimeout(function() {$('.'+equal).not('li').hide();});
    });

    $('.dropdown').hover(function(){        
        if (hide1) clearTimeout(hide1);            
    }, function() {            
        hide1 = setTimeout(function() {$('.dropdown').hide();});
        $('.active').removeClass();        
        $('.dropdown').stop().show();
    });

});