将hoverintent添加到ajax下拉菜单中

Question

我正在制作一个通过ajax加载的巨型下拉菜单。我想添加悬停意图到菜单，但我还没能找到一个很好的例子结合。live()与hoverintent它。

我想延迟悬停几秒钟，让其他菜单在折叠时先开始。

<script type="text/javascript">
$(document).ready(function(){
    $('li.top-nav-links').live('mouseenter', function() {
           $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
           $(this).find('div').slideDown(300);
           $(this).css('z-index', 9000 );      
    });
    $('li.top-nav-links').live('mouseleave', function() {
           $(this).find('div').slideUp(function() {
                   $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
               });
               $(this).css('z-index', 8000 ); 
    });
});
</script>

注意:基本上是无序的显示隐藏div的列表它。z指数重排序最多当前悬停下拉到顶部

Answer 1

这就是最终的工作。我不完全确定为什么不需要.live()，因为它是通过Ajax加载的。我想这就是我误入歧途的原因。

$(document).ready(function(){
    var overFn = function(){
        $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
        $(this).find('div.sub').slideDown(300);
        $(this).css('z-index', 9000 );
         return false;
    };
    var outFn = function(){
        $(this).find('div.sub').slideUp(280, function() {
           $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
           });
         $(this).css('z-index', 8000 ); 
    }; 
    $('li.top-nav-links').hoverIntent({ 
        over: overFn, 
        out: outFn 
    });
});

注意:在添加hoverIntent之前需要 .live()。

---

Update:上面的代码在测试站点上工作。然而，一旦我们把它移到我们需要做一个改变，因为它停止了触发hoverIntent。我发现这个帖子由RANDOM.NEXT()非常有助于找到我们的解决方案——http://bit.ly/D4qr9

这是最后的最终代码:

jQuery(function()  
{  
    $('li.top-nav-links').live('mouseover', function()  
    {  
        if (!$(this).data('init'))  
        {  
            $(this).data('init', true);  
            $(this).hoverIntent  
            (  
                function()  
                {  
                    $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
                    $(this).find('div.sub').slideDown(300);
                    $(this).css('z-index', 9000 );
                     return false; 
                },  
                function()  
                {  
                    $(this).find('div.sub').slideUp(280, function() {
                       $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
                       });
                     $(this).css('z-index', 8000 ); 
                }  
            );  
            $(this).trigger('mouseover');  
        }  
    });  
});

Answer 2

<script type="text/javascript">
$(document).ready(function(){
    var config = {  
        // put hoverIntent options here    
    };
    $('li.top-nav-links').live('hoverIntent', config, function() {
           $(this).find('a.top-nav-link-hover').addClass("top-nav-hover");
           $(this).find('div').slideDown(300);
           $(this).css('z-index', 9000 );      
    });
    $('li.top-nav-links').live('mouseleave', function() {
           $(this).find('div').slideUp(function() {
                   $(this).siblings('a.top-nav-hover').removeClass("top-nav-hover");
               });
               $(this).css('z-index', 8000 ); 
    });
});
</script>