Menu a discesa multipli, uno script jQuery
-
09-09-2020 - |
Domanda
Ho giocato con il menu a discesa JDIV sviluppato da Skyrocket Labs e migliorato da Peter Hinton.Funziona bene per più menu sulla stessa pagina, finché si replica il codice con identificatori diversi (trigger # NAV1 # Hidden-Menu1, # nav2 trigger # hidden-nav2, ecc.).
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();
});
.
Sto cercando di risolvere come riscrivere il codice in modo che possa, "Scopri" il valore numerico del NAVX collegato in linea e attiva i Divs Hidden-Navx appropriati.
Soluzione
qui è un working
jsfiddle demo
Ho rimosso tutti gli ID solo per mostrare quanto sia facile e a strisce può essere anche il codice e il funzionamento, solo usando classi .
.
Puoi annullare i tuoi ID se devi usarli, ma lascia tutto invariato.
Se hai bisogno di spiegazioni sul codice che posso commentare ogni riga.
Ecco la jQuery new / modificata:
$(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 Commenti
Per aiutarti a capire in poche parole: aggiungiamo automaticamente una stessa classe personalizzata a ciascun 'Li' e il suo "Dropdown" di coiettivo "chiamato: '.connectedn',
dove 'n' è un numero incrementato.
Tene solo diciamo: se l'ondulato 'Li' è la classe 'connected3' significa che abbiamo appena acquisito il 3 ° "Li", e andremo ad aprire il '.dropdown' che hanno la stessa classe.
Altri suggerimenti
Prova
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);
}
.