jQuery简单的下拉菜单？

Posted 2023-05-08

【中文标题】jQuery简单的下拉菜单？

【英文标题】：jQuery easy pulldown menu?

【发布时间】：2012-02-26 15:16:51

【问题描述】：

我已经建立了一个简单的下拉菜单。 代码和演示在这里：http://jsfiddle.net/3Lq2d/5/ 它看起来像这样：

将鼠标悬停在MENU 1 上会淡出Submenus。

效果很好，除非你碰巧是个垃圾人，在菜单上晃动鼠标，在这种情况下，它会卡在半透明状态。

使用.stop(true,true) 修复了spaz 问题，但删除了将鼠标从菜单向下移到子菜单的功能。我正在使用淡入/淡出来稍微延迟，所以当鼠标从菜单移动到子菜单时，子菜单保持可见...... stop(true,true) 打破了这一点。

在所有正确的地方构建一个带有轻微延迟的淡入淡出菜单的最佳方法是什么？

---

更新：

我一直在修改直到完全满意，增加了 hoverintent 的延迟......这是最终代码：http://jsfiddle.net/3Lq2d/75/

【问题讨论】：

+1 用于问题的简洁格式..！

【参考方案1】：

删除return false;，我相信这是你的问题。 http://jsfiddle.net/3Lq2d/3/

另外，我建议您为此使用无序列表而不是 div，这样更有意义，并且不会让您头疼。

看看我前段时间写的这个教程http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/

【讨论】：

有趣，这确实使它表现更好，但弹出窗口的不透明度仍然会卡在几乎不可见的位置。我会更新 jsfiddle。

是的，出于某种原因，$('#the_pop').stop().fadeIn('fast'); 会中断自己，使其无法 100% 淡出。

但是将其更改为 $('#the_pop').stop(true,true).fadeIn('fast'); 有效！惊人的。感谢您的帮助！

没问题，很高兴它成功了。我建议用ul 代替。你应该接受答案...