javascript - 悬停意图不起作用

Question

我对js不太好。如何让它与 hoverIntent 一起使用？

$(document).ready(function () {
    $('#nav > li > a').hover(function(){
        if ($(this).attr('class') != 'active'){
            $('#nav li ul').slideUp(800);
            $(this).next().slideToggle(800);
            $('#nav li a').removeClass('active');
            $(this).addClass('active');
        }
    });
    return false;
});

我尝试过四处搜索，但不太确定该怎么做。它现在基本上可以使用悬停。但是如何将 .hoverIntent 添加到代码中。

这是小提琴。

我不能只是将 .hover 更改为 .hoverIntent 对吗？

Answer 1

对于 hoverIntend，请参阅 jQuery 插件： http ://cherne.net/brian/resources/jquery.hoverIntent.html （您只需下载缩小版并将其导入您的应用程序：http ://cherne.net/brian/资源/jquery.hoverIntent.minified.js）。

这里是 jsFiddle：http: //jsfiddle.net/Fmu8Y/1/

还有一个有用的链接：延迟 jquery 悬停事件？

$(document).ready(function () {
  $('#nav > li > a').hoverIntent(function(){
    if (!$(this).hasClass('active')){
      $('#nav li ul').slideUp(800);
      $(this).next().slideToggle(800);
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
   }
 }, function() {
  if ($(this).hasClass('active')){
      $(this).next().slideUp(800);
      $(this).removeClass('active');
    }  
  });
  return false;
});