0

我正在开发一个通过 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 将最新的悬停下拉列表重新排序到顶部

4

2 回答 2

3

这就是最终的工作。我不完全确定为什么不需要 .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()。

更新：上面的代码在测试站点上工作。但是，一旦我们将其移至实时站点，我们需要进行更改，因为它停止触发 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');  
        }  
    });  
});
于 2011-04-07T18:17:29.593 回答
0 
<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>
于 2011-04-07T14:16:55.560 回答