Jquery 如果缺少子元素，则下拉列表将失去索引

我试图构建一个简单的下拉菜单，但是如果父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');
});

这是小提琴

---

您可以使用

此

类似的方法瞄准相对元素-您可以瞄准悬停的

catMainHolder

元素中的

subCat

和

catMain

元素

$('.catMainHolder').has('.subCat').hover(function () {
    $('.subCat', this).show();
    $('.catMain', this).addClass('active');
}, function () {
    $('.subCat', this).hide();
    $('.catMain.active').removeClass('active');
});

演示：

此外，您还可以使用如上所示的方法，仅针对那些具有悬停事件子类别的

catMainHolder

元素。或者使用：has（）类似于

$（'.catMainHolder:has（.subCat）'）。悬停（…）
尝试以下操作：

$('.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');
});