將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下拉菜單

回答

相關問題