Menús múltiples menús desplegables, un guión jquery
-
09-09-2020 - |
Pregunta
He estado jugando con el menú desplegable JDIV desarrollado por Skyrocket Labs y mejorado por Peter Hinton.Funciona bien para múltiples menús en la misma página, siempre y cuando replique el código con diferentes identificadores (# NAV1 desencadenantes # Oculto-menu-Menu1, # NAV2 activadores # 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();
});
Estoy tratando de solucionar cómo reescribir el código para que pueda, "Descubrir" el valor numérico del NAVX vinculado flotó y desencadena los DIVS ocultos apropiados.
Solución
aquí hay un trabajo de trabajo
jsfiddle demo
He eliminado todos los ID para mostrar lo fácil y a rayas, también puede ser el código y la función funcional, solo usando las clases .
Puede deshacer su identificación si necesita usarlos, pero deje todo sin cambios.
Si necesita una explicación sobre el código que puedo comentar cada línea.
Aquí está el nuevo / cambiado JQery:
$(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();
});
});
con comentarios
Para ayudarlo a comprender en pocas palabras: agregamos automáticamente una misma clase personalizada a cada 'Li' y su desplegamiento de su correspondente 'llamado:' .connectectedn ',
donde' n 'es un número incrementado.
De lo que solo decimos: si el 'LI' flotado es Clase 'conectado3' Eso significa que simplemente flotamos el 3º 'LI', y iremos a abrir la '.Dropsdown' que tengan la misma clase.
Otros consejos
try
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);
}