Добавление hoverintent в выпадающее меню ajax - PullRequest
Новая
       31

Добавление hoverintent в выпадающее меню ajax

0 голосов
/ 07 апреля 2011

Я работаю над мега выпадающим меню, которое загружается через 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-индекс меняет порядок наиболее текущее падение падает до вершины

Ответы [ 2 ]

3 голосов
/ 07 апреля 2011

Это то, что сработало. Я не совсем уверен, почему .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');  
        }  
    });  
});
0 голосов
/ 07 апреля 2011 
<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>
...