Несколько раскрывающихся меню, один скрипт jQuery
-
09-09-2020 - |
Вопрос
Я играл с раскрывающимся меню JDIV, разработанный лабораториями Skyrocket и улучшена Peter Hinton.Он хорошо работает для нескольких меню на той же странице, пока вы копируете код с разными идентификаторами (# Nav1 Triggers # Hidden-Menu1, # Nav2 Triggers # Hidden-Nav2, и т. Д.).
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();
});
.
Я пытаюсь разобраться, как переписать код, чтобы он мог, «обнаружить» численное значение NAVX, связанного навязчивым и вызванным подходящим hidden-navx divs.
Решение
Здесь работает работа
jsfiddle demo
Я удалил все идентификаторы, чтобы показать, насколько легко и Striped может быть кодом и функционалом, просто используя классы .
Вы можете отменить свой идентификатор, если вам нужно использовать их, но оставьте все без изменений.
Если вам нужно объяснение по коду, я могу прокомментировать каждую строку.
Вот новый / измененный 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» и его соответствующего «выпадающего» под названием: «.ConnectedN»,
где 'n' - это увеличенный номер.
Чем мы просто говорим: если завитая «Li» является классом «подключен3», что означает, что мы просто зависели на 3-й «Li», и мы пойдем, чтобы открыть «.DROPDOND», которые имеют одинаковый класс.
Другие советы
попробуйте
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);
}
.