jQuery菜单toggleSlidehover？
我有一个菜单，其中只有一个项目有一个子列表。 这是HTML代码：
当鼠标在菜单或子菜单上时，我想slideDown菜单并保持打开状态。 所以以下工作正常，但我想要hover而不是点击相同的东西。
$('#menu ul li').click(function() { $('#menu ul li ul').slideToggle('slow', function() { }); });
我试着hover，但它非常错，这里也是代码：
$("#menu ul li").hover( function () { $("#menu ul li ul").slideDown('slow'); }, function () { $("#menu ul li ul").slideUp('slow'); } );
我试图添加.stop(true, true)或$("#menu ul li ul").css("display", "block"); 在slideDown之后，它仍然是马车。
CSS
#menu ul { list-style: none; } #menu ul li { display: block; float: left; padding: 0; margin: 0 30px; } #menu ul li a { color: #8b4513; text-decoration: none; font-size: 16px; } #menu ul li a:hover { text-decoration: underline; } #menu ul li a img { position: relative; top: 2px; left: -4px; } #menu ul li ul { position: absolute; width: 151px; height: 90px; top: 59px; left: 300px; padding: 10px 0 0 0; background: url(gfx/submenu.png) no-repeat; z-index: 1; } #menu ul li ul li { height: 27px; float: none; margin: 0 25px; }
实时查看
HTML
jQuery的
$("#menu ul li").hover( function () { $(this).children("ul").stop(true,true).slideDown('slow'); }, function () { $(this).children("ul").stop(true,true).slideUp('slow'); } );
每次鼠标移过元素时都会触发hover。 改为使用输入/离开：
$("#menu ul li").mouseenter( function () { $("#menu ul li ul").slideDown('slow'); } ); $("#menu ul li").mouseleave( function () { $("#menu ul li ul").slideUp('slow'); } );
小提琴演示： http ： //jsfiddle.net/ZMLyz/
$('#menu ul li').mouseenter(function() { $(this).find('ul').slideDown('slow'); }); $('#menu ul li').mouseleave(function() { $(this).find('ul').slideUp('slow'); });