【发布时间】：2011-06-25 06:31:05
【问题描述】：
我正在尝试使用 jQuery 的 hover 来做下拉菜单。所以我尝试的第一件事是：
<ul id="menu">
<li>
<ul>
...
</ul>
</li>
...
</ul>
$(" #menu ul ").css({display: "none", visibility: "hidden"});
$(" #menu li ").hover(function() {
$(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast');
},
function() {
$(this).find('ul:first').css({visibility:"hidden", display:"none"});
});
这很好用……在 Firefox 中。不幸的是，在我正在运行的 Chrome 版本（9.0.597.94）中，如果您将鼠标悬停在该下拉菜单上，它会在 $("#menu li#) 上触发鼠标。
好吧，我们有一个竞态条件，我需要做的就是添加一些计时器......
(function(){
var timer;
$(" #menu li ").hover(function() {
$(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast');
},
function() {
var header = $(this);
timer = setTimeout(function() {
header.find('ul:first').css({visibility:"hidden", display:"none"});
}, 100);
});
$(" #menu li > ul ").hover(function() {
clearTimeout(timer);
},
function() {
$(this).css({visibility:"hidden", display:"none"});
});
}();
这真的很棒，直到有人说we need to put a textbox in that dropdown menu；当然，文本框会导致鼠标在 $("#menu li > ul") 上触发，所以现在我必须放置另一个嵌套的计时器层，我在想：有必须是更好的方法来做到这一点！
所以我希望有人能告诉我...
【问题讨论】：
-
问题 #1：为什么需要在菜单中添加文本框？
-
@Paulo 您可以放心地假设所有“设计”决策都发生在我无法控制的水平上。但是，这对我来说是一个反复出现的问题（下拉菜单和超时），如果我有一种更简单的方法来创建这些菜单，那就太好了。
标签： jquery html drop-down-menu