Я пытаюсь создать простое раскрывающееся меню, но мне не хватает индексации, если родительский div не хватает детей, которые я показываю и скрываю. Этот сценарий появляется, если есть пункт меню, который не имеет выпадающего списка, но является частью навигации.
Вот мой js
$('.catMain').removeClass('active');
$('.catMainHolder').mouseover(function () {
$('.subCat').eq($(this).index()).show();
$('.catMain').eq($(this).index()).addClass('active');
});
$('.catMainHolder').mouseout(function () {
$('.subCat').eq($(this).index()).hide();
$('.catMain').removeClass('active');
});
вот скрипка
Вы можете нацелить относительные элементы, используя this
как - вы можете настроить таргетинг на subCat
и catMain
элементы внутри наведен catMainHolder
элемента.
$('.catMainHolder').has('.subCat').hover(function () {
$('.subCat', this).show();
$('.catMain', this).addClass('active');
}, function () {
$('.subCat', this).hide();
$('.catMain.active').removeClass('active');
});
Демо: скрипка
Также вы можете настроить только те элементы catMainHolder
которых есть subCat
для события hover, используя .has(), как показано выше. Или используйте: has(), как $('.catMainHolder:has(.subCat)').hover(..);
Попробуй это:
$('.catMain').removeClass('active');
$('.catMainHolder').mouseover(function () {
$(this).find('.subCat').show();
$(this).find('.catMain').addClass('active');
//$('.subCat').eq($(this).index()).show();
//$('.catMain').eq($(this).index()).addClass('active');
});
$('.catMainHolder').mouseout(function () {
$(this).find('.subCat').hide();
$(this).find('.catMain').removeClass('active');
//$('.subCat').eq($(this).index()).hide();
//$('.catMain').removeClass('active');
});