仅在子菜单上显示子菜单的子菜单
我试图在菜单上显示子菜单。 我已成功进入子菜单级别1.但是当我进入子菜单级别2（即子菜单的子菜单）时，它无效。 我想仅在hover1级子菜单时显示2级子菜单。 以下是我尝试过的代码
以下是jQuery
$('ul.submenu').hide(); $('ul.nav > li').hover(function () { if ($(this).find('ul.submenu').length > 0) { $(this).find('ul.submenu').stop().slideDown('slow'); } },function () { if ($(this).find('ul.submenu').length > 0) { $(this).find('ul.submenu').stop().slideUp('slow'); } });
请在这里找到小提琴： http ： //jsfiddle.net/Midhun28/RbY83/1/
据我所知，你希望将子菜单hover在上面一级的列表项上
我将子菜单类添加到我希望它们最初隐藏的所有元素中。 然后我对jquery代码进行了一些修改，以便与所有子菜单一起使用
$('ul.submenu').hide(); $('ul.nav > li, ul.submenu > li').hover(function () { if ($('> ul.submenu',this).length > 0) { $('> ul.submenu',this).stop().slideDown('slow'); } },function () { if ($('> ul.submenu',this).length > 0) { $('> ul.submenu',this).stop().slideUp('slow'); } });
希望这对你有用http://tsfiddle.net/U7mqM/
如果希望在将鼠标hover在子元素上时触发它们，请使用mouseenter和mouseleave事件。
$('.nav ul').hide(); $('.nav li').mouseenter(function() { $(this).children('ul').stop().slideDown('slow') }).mouseleave(function() { $(this).children('ul').stop().slideUp('slow') });
jQuery(function(){ topNav = jQuery('ul.topnav > li > a'); if(jQuery(topNav).hasClass('hover')){ return } jQuery(topNav).hover(function(){ jQuery(this).addClass('hover'); jQuery(this).next('.subnav').slideToggle('', function(){ jQuery(topNav).removeClass('hover'); }); }); });