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-index重新排序最多当前盘旋下降到顶部

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 
    });

});

注意： .live（）在添加hoverIntent之前是必需的。

更新：上面的代码在测试网站上运行。但是，一旦我们把它移到了现场我们需要进行更改，因为它停止了触发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>

将hoverintent添加到ajax下拉菜单

2 个答案: