Vários menus suspensos, um script JQuery
-
09-09-2020 - |
Pergunta
Tenho brincado com o menu suspenso jDiv desenvolvido pela Skyrocket Labs e aprimorado por Peter Hinton.Funciona bem para vários menus na mesma página, desde que você replique o código com identificadores diferentes (#nav1 aciona #hidden-menu1, #nav2 aciona #hidden-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();
});
Estou tentando descobrir como reescrever o código para que ele possa "descobrir" o valor numérico do link navX pairado e acionar os divs ocultos-navX apropriados.
Solução
Aqui está um trabalho
DEMO JSFiddle
Removi TODOS os ID's só para mostrar o quão fácil e listrado pode ser o código e funcional também, apenas usando Aulas.
Você pode desfazer seus IDs se precisar usá-los, mas deixe tudo inalterado.
Se precisar de explicação sobre o código posso comentar cada linha.
Aqui está o Jquery novo/alterado:
$(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();
});
});
Com COMENTÁRIOS
Para ajudá-lo a entender em poucas palavras:Adicionamos automaticamente uma MESMA classe personalizada a cada 'li' e seu correspondente 'dropdown' chamado:'.conectadoN',
onde 'N' é um número incrementado.
Então apenas dizemos:se o 'li' pairado for a classe 'connected3' isso significa que acabamos de passar o mouse sobre o terceiro 'li' e iremos abrir o '.dropdown' que tem a MESMA classe.
Outras dicas
Tentar
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);
}