jQuery hoverIntent无法正常工作，但悬停确实可以 [英] jQuery hoverIntent not working, but hover does

问题描述

我有以下代码:

$(document).ready(function(){
    $(".yearInner").hide();

    $(".year", this).hover(
        function () {
            $(".yearInner", this).slideToggle();
        }
    );

});

它隐藏了yearInner类的div，然后将鼠标悬停在class年的包含div上时，yearInner div会打开.

It hides the div with class yearInner, and then when the containing div with class year is hovered over, the yearInner div toggles on.

做得很好，我想使用hoverIntent插件而不是悬停.与hoverIntent完全不起作用.有建议吗?

Works fine, put I'd like to use the hoverIntent plug-in instead of hover. Doesn't work at all with hoverIntent. Suggestions?

Div结构供参考:

<div class="year">
    2009  
    <div class="yearInner">
        More Info...
    </div>
</div>
<div class="year">
    2008
    <div class="yearInner">
        More Info...
    </div>
</div>

推荐答案

您需要拆分悬停/离开回调以使用该插件，如下所示:

You need to split the hover/leave callbacks to use that plugin, like this:

$(".year", this).hoverIntent(function () { 
   $(".yearInner", this).slideDown();
}, function() {
   $(".yearInner", this).slideUp("fast"); 
});

不知道为什么没有像jQuery那样在内核中有一个重写可以接受在两种情况下都可以运行的单个函数，但是这就是解决方法.注意:.slideToggle()仍然可以正常工作，我只是添加了一些变化.

Not sure why there isn't an override like jQuery has in core that accepts a single function to run in both cases, but this is the fix. Note: .slideToggle() still works just fine, I just added a bit of variety in.

这篇关于jQuery hoverIntent无法正常工作，但悬停确实可以的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！