下拉丢失索引如果缺少子元素

Question

我想构建一个简单的下拉菜单，但我错过了索引，如果父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'); 
}); 

这里是小提琴

http://jsfiddle.net/sghoush1/b7kVk/7/

Answer 1

可以使用this像目标相对元素 - 你可以针对悬停catMainHolder元素中subCat和catMain元素。

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

演示：Fiddle

您也可以只针对那些catMainHolder具有subCat为如上所示使用.has()悬停事件元素。或使用：有（）之类$('.catMainHolder:has(.subCat)').hover(..);

Answer 2

试试这个：

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

Fiddle