0

私は ajax 経由で読み込まれるメガ ドロップダウン メニューに取り組んでいます。メニューにホバー インテントを追加したいのですが、.live() とホバー インテントを組み合わせた良い例を見つけることができませんでした。

ホバーを数秒間遅らせて、他のメニューが折りたたまれるのを早めたいと思います。

<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 に答える