0

我有一个导航系统，它在某些元素上具有单级下拉菜单。我已经让它按照我想要的方式工作了，只是当鼠标沿着它移动时很容易掉出导航的底部（这是第二条全宽线下拉与内联项目）。

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

有没有办法在调用悬停事件时找到您正在鼠标移动的元素？通过这种方式，我可以检测他们是否将鼠标悬停在身体​​上并启动一个计时器以在 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");
});
4

1 回答 1

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                    
}
于 2009-11-04T18:29:24.473 回答