将hoverintent添加到ajax下拉菜单

我正在处理通过ajax加载的超级下拉菜单。我想将悬停意图添加到菜单中，但我一直无法找到将.live（）与hoverintent结合的好例子。将hoverintent添加到ajax下拉菜单

我想延迟悬停几秒钟，以使其他菜单在折叠时处于领先位置。

<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>

注：基本上它是一个无序名单，揭示里面的它一个隐藏的股利。该z-index的重新排序最目前徘徊下拉顶端

来源

2011-04-07 Ethan H

你可以代替的mouseenter和mouseleave只是使用'.live（'hover'，function（）{在mouseeneter上执行此操作}，function（）{在mouseleave上执行此操作}）;}）;' – rsplak 2011-04-07 14:13:50

我开始使用hover和slideToggle，但由于复杂性扩展悬停的div有处理它的位置的问题在子导航里面。 – 2011-04-07 14:17:22

这是结束了工作。我不完全确定为什么.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'); 
     } 
    }); 
});

来源

2011-04-07 18:17:29

看起来像一堆让hoverIntent与live一起工作的工作。我有一个类似的问题，但最终与非hoverIntent解决方案使用setTimeOut和clearTimeOut ...我试过上面的代码，但不能完全得到它在我的scenerio免费工作的bug。耻辱hoverIntent不适用于现场。 – RayLoveless 2012-05-30 19:28:45

<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-07 14:16:55

将hoverintent添加到ajax下拉菜单

回答

相关问题