Question

我的导航系统在某些元素上有一个单一的下拉列表。我让它按照我想要的方式工作，除了当它沿着它移动时很容易掉到导航的底部（这是第二个全宽线下拉内联项目）。

我需要的是一种方法，当你从底部掉下来时，阻止导航消失，而不会干扰其他导航项目（这样当你将鼠标悬停在导航项目上时，它们会立即隐藏导航）。

当调用鼠标悬停事件时，有没有办法找到你要插入的元素？通过这种方式，我可以检测到它们是否被鼠标悬停在身体上并启动计时器以在1000毫秒内隐藏导航。

我已经尝试过hoverIntent，但是这对我需要的东西不起作用，因为我无法承受从一个导航项目移动到另一个导航项目的延迟......这使导航器很难使用！

是否有办法检测他们是否只是使用鼠标位置掉出了导航的底部？

非常感谢任何帮助。当前导航的Jquery在下面。

var navDisplayTimer;
var navDisplayObject;
$("#main-nav > li").addClass("js-enabled");
$("#main-nav > li").hover(function(){
 $(this).addClass("hovered");
 if ($(this).find("ul").length != 0) {
  $(this).parent().stop().animate({borderWidth: "22px"}, 400);
  if($(this).parent().css("borderWidth") == "22px 22px 22px 22px") {
   $(this).find("ul").show();
  } else {
   navDisplayObject = this;
   navDisplayTimer = setTimeout(function() {
    $(navDisplayObject).find("ul").show();
   }, 300);
  }
 }
},function(){
 clearTimeout(navDisplayTimer);
 $(this).find("ul").hide();
 $(this).parent().stop().animate({borderWidth: "2px"}, 400);
 $(this).removeClass("hovered");
});

Answer 1

与您当前的方法略有不同，当用户离开菜单div时会触发事件，但是使用超时来执行此操作。

除此之外，当您将鼠标悬停在菜单div中的导航项目上以清除关闭超时时，会触发一个事件。

这会让用户和鼠标重新获得机会。尝试一下，看看你的想法。

$('#selectednavigationdiv').bind("mouseout", close);
$('#selectednavigationitems').bind("mouseover", function() { clearTimeout(hideTimer ); });// stop drop down menu from being closed

var hideTimer = setTimeout(function() {  }, 1);//initialise so not undefined
function close() {
    clearTimeout(hideTimer );
    hideTimer = setTimeout(function() { $('#selectednavigationdiv').slideUp('fast') }, 1000);//close drop down menu                    
}

JQuery在悬停时获取鼠标移入的元素

1 个答案: