【问题标题】:jQuery hoverIntent not working, but hover doesjQuery hoverIntent 不工作,但悬停
【发布时间】:2010-03-25 20:07:38
【问题描述】:

我有以下代码:

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

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

});

它隐藏了类 yearInner 的 div,然后当包含类 year 的 div 悬停在上面时,yearInner div 切换。

工作正常,我想使用 hoverIntent 插件而不是悬停。对 hoverIntent 根本不起作用。有什么建议吗?

Div结构供参考:

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

【问题讨论】:

标签: jquery hoverintent


【解决方案1】:

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

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

不知道为什么没有像 jQuery 那样的覆盖在核心中接受单个函数在两种情况下运行,但这是修复。注意:.slideToggle() 仍然可以正常工作,我只是添加了一些变化。

【讨论】:

  • 现在它显示所有内容,而不是在页面加载时隐藏 .yearInner,并且 hover/hoverIntent 什么都不做。
  • @kylex - 在此之前您仍然需要 $(".yearInner").hide(); 位...至于它不起作用,您使用的是什么版本的 jQuery,您确定插件包含正确吗?
  • $(".yearInner").hide() 还在,我正在使用 jquery 1.4
  • @kylex - 我的错,我留下了一个右括号,最后一行应该是}); 而不仅仅是);,更新了这个更正的答案。你可以在这里看到一个工作演示:jsfiddle.net/cgqFB
  • 是的,我最初看到了,这一切都说得通,你的演示有效,但它在我的网站上不起作用。想不通...
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多