複数のドロップダウンメニュー、1つのjQueryスクリプト

Question

Skyrocket Labsによって開発され、Peter Hintonによって改善されたJDIVドロップダウンメニューで遊んでいます。同じページ上の複数のメニューにうまく機能します。

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

.

コードの書き換え方法を整理しようとしています。

Answer 1

これは働いています
jsfiddleデモ

私はすべてのIDを削除しました。 classes を使用するだけで、コードと機能を簡単かつ機能させることができます。
あなたがそれらを使う必要があるならば、あなたの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'と彼の承認者のdropdown 'を自動的に追加しました：' .connectedn '、ここで' n 'はインクリメントされた数です。
heroved 'li'がクラス 'Connected3'の場合よりも、私たちは3th '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);
}

.