jQuery下拉导航

我使用简单的jQuery代码进行下拉导航，但它没有给出预期的结果……

jquery代码

$(function() { $('.nav li').hover(function () { $('ul', this).slideDown(100); }, function () { $('ul', this).slideUp(100); }); }); 

HTML代码

 
 
Dashboard
 
Projects 
 
Recent Projects
 
Archive Projects
 
New Project
 
 
 
Messages
  

请检查并告诉我我错过了什么。 谢谢。

Answer 1

编辑：除了在关闭状态下启动之外，为了解决动画“闪烁问题”，您可以使用以下内容（在jsfiddle上查看 ）。 它不是很优雅，但这个问题源于一些浏览器处理所涉及元素大小变化的方式，这确实解决了这个问题：

 $(function() { $('.nav li').hover(function () { $('ul:not(:animated)', this).slideDown(100); }, function () { $('ul:not(:animated)', this).slideUp(100); }); $('.nav li ul').slideUp(0); }); 

Answer 2

试试这个 – 它增加了一个延迟，以保持你有时遇到的“闪烁”。

 $(function() { $('.nav li').hover(function () { $('ul', this).delay(50).stop().slideDown(100); }, function () { $('ul', this).delay(50).stop().slideUp(100); }); });