Question

我是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
});

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

Answer 1

您遇到的问题是因为当您离开导航栏时，会立即触发.mouseleave项隐藏#dropdown。{/ p>

我要做的是在nav_item的mouseleave事件上稍微停留一半或更短的时间以隐藏下拉列表。这将允许用户在导航栏外设置的秒数，以便他们可以将鼠标悬停在下拉列表上。用户在#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的{{1}}事件。

Answer 2

第二段代码使得当你离开＃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
  }
}

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

jQuery如何选择多个元素

2 个答案: