0

我是 jQuery 新手，我想弄清楚如何为我要创建的导航栏选择多个元素。我想让它检查用户的鼠标是在导航栏中的项目上还是在下拉菜单上（否则下拉菜单会消失）。我尝试使用： $('#nav_item_1').mouseenter(function(){
//make the drop down menu visible and change nav_item background here
});
`

$('#nav_item_1,#dropdown').mouseleave({
    //revert everything back to normal
});

但是当我尝试将鼠标从导航栏中的项目移动到下拉菜单时，它会将一切恢复正常。

4

2 回答 2

0

第二段代码使得当您离开#nav_item_1 或#dropdown 时，一切都将被还原。因此，当您离开#nav_item_1 转到#dropdown 时，该事件将触发。

如果当前鼠标目标包含下拉菜单或 nav_item，您可以检查每个鼠标移动：

$("#nav_item_1").mouseenter(function () {
  // make menu visible etc
}

$(document).mousemove(function (e) { // note the e parameter
  if ($(e.target).has("#dropdown,#nav_item_1").length !== 0) {
    // revert
  }
}

这需要两个元素彼此非常接近才能使其正常工作。

于 2012-08-19T00:13:30.843 回答
0

您遇到的问题是，当您离开导航栏项目时.mouseleave，会立即触发隐藏#dropdown它。

我在这里要做的是在mouseleave事件上设置一个nav_item大约半秒或更短的时间来隐藏下拉菜单。这将允许用户在导航栏之外设置秒数，以便他们可以将鼠标悬停在下拉菜单上。用户打开后，#dropdown我将清除超时，以防止下拉隐藏的正常行为。

你会如何用代码来做到这一点？
$('#nav_item_1').mouseleave(function() {
/* set your time out here to return everything to normal. Because we want to allow the dropdown to stay visible for a fraction of time required to move the cursor to the dropdown.*/
});

接着，
$('#dropdown').mouseenter(function() {
// clear the timer to prevent normal behavior (keeping the dropdown visible).
});

看看这个链接：http ://www.w3schools.com/js/js_timing.asp

关于您关于选择多个项目的原始问题。你正在正确地做这件事。但正如我上面解释的那样，您的代码没有mouseleave达到#dropdown.

于 2012-08-18T23:59:14.487 回答