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

Question

我一直在使用由 Skyrocket Labs 开发并由 Peter Hinton 改进的 jDiv 下拉菜单。它适用于同一页面上的多个菜单，只要您使用不同的标识符复制代码（#nav1 触发 #hidden-menu1，#nav2 触发 #hidden-nav2 等）。

        var hide1 = false;
$("#nav1").hover(function(){          
    if (hide1) clearTimeout(hide1);
    $("#hidden-nav1").show();
    }, function() {
    hide1 = setTimeout(function() {$("#hidden-nav1").hide();});
    });

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

我正在尝试弄清楚如何重写代码，以便它可以“发现”悬停链接的 navX 的数值并触发适当的隐藏 navX div。

Answer 1

这是一个工作
JSFiddle DEMO

我删除了所有 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();
    });

});

使用 COMMENTS

为了帮助您用几句话理解：我们添加自动为每个“li”及其对应的“下拉菜单”调用相同的自定义类：“.connectedN”，
其中“N”是递增的数字。
比我们刚才说的：如果悬停的“li”是类“connected3”这意味着我们刚刚将鼠标悬停在第三个“li”上，然后我们将打开具有相同类的“.dropdown”。

Answer 2

尝试

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