Menus publicitaires multiples, un script JQuery

Question

J'ai joué avec le menu déroulant JDIV développé par Skyrocket Labs et amélioré par Peter Hinton.Cela fonctionne bien pour plusieurs menus sur la même page, tant que vous reproduisez le code avec différents identifiants (# Nav1 déclencheurs # caché-menu1, # Nav2 déclenchers # caché-nav2, etc.).

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

J'essaie de trier la manière de réécrire le code de manière à ce qu'elle puisse, "Découvrez" la valeur numérique de NAVX liée survolée et déclenche les DIV de Navx caché appropriés.

Answer 1

Voici un travail de travail jsfiddle démo

J'ai supprimé tous les identifiants de tous les identifiants pour montrer à quel point le code et les rayures peuvent également utiliser le code et le fonctionnement, il suffit d'utiliser classes . de
Vous pouvez annuler votre identifiant si vous devez les utiliser, mais laissez tous inchangés.

Si vous avez besoin d'une explication sur le code, je peux commenter chaque ligne.

Voici la nouvelle / modifiée 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();
    });

});

avec Commentaires

Pour vous aider à comprendre en quelques mots: nous ajoutons automatiquement une même classe personnalisée à chaque "Li" et son correspondant "Dropdown" appelé: ".connectedn",

est un nombre incrémenté.
Que nous disons simplement: Si le "Li" survolé, c'est "Connecté3", cela signifie que nous venons de planifier le 3ème "Li", et nous allons ouvrir le ".dropdown" qui ont la même classe.

Answer 2

essayer

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