0

ドロップダウンメニューがあり、ページの上部全体に幅全体が広がるため、ページの上部からマウスを離すと、ブラウザのメニュー/アドレスバーにすばやくメニューが開きます. これを少し遅らせたいので、メニューを開く前にマウスを 0.5 秒静止させる必要があります。これにより、マウスをページの上からスライドさせるたびに、このダンメニューが開かないようにすることができます。

$(function(){
       $(window).resize();
       $('#navigation_horiz ul li').bind('mouseenter',function(e){
    timer = setTimeout(function(){
        $('#navigation_horiz ul li').removeClass('active');
        $(this).addClass('active');
        if($(this).children('.dropdown').length>0){
            $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
            $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
            $('#navigation_horiz ul').next('.dropdown').slideDown(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
        }
    }, 500);
    });

    jQuery.expr[':'].focus = function( elem ) {
      return elem === document.activeElement && ( elem.type || elem.href );
    };  

    $('#navigation_horiz').bind('mouseleave',function(){
        if($('#navigation_horiz ul').next('.dropdown').children().length > 0 && $('#navigation_horiz ul').next('.dropdown').attr('id')=='dropdown_login' && ($('#navigation_horiz ul').next('.dropdown').find('input').is(":focus") || $('#navigation_horiz ul').next('.dropdown').find('select').is(":focus") )){
        }else{
            $('#navigation_horiz ul li').removeClass('active');
            $('#navigation_horiz ul').next('.dropdown').delay(600).slideUp(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:1},0).animate({opacity:0},1000,'linear');
        }
    });

    $('#TabbedPanels1 .TabbedPanelsContentGroup').children().hide();
    $('#TabbedPanels1 .TabbedPanelsContentGroup').children(":eq(0)").show();    
    $("#TabbedPanels1 .TabbedPanelsTabGroup li").live('click',function(){
        $(this).parent('ul').next('.TabbedPanelsContentGroup').children().hide();
        $(this).parent('ul').next('.TabbedPanelsContentGroup').children(":eq("+$(this).attr('tabindex')+")").show();
    }); 
    <!--

    //-->

});
4

2 に答える 2

0

使用するsetTimeout()

 var timer;
 $('#navigation_horiz ul li').bind('mouseenter',function(e){
      timer =  setTimeout(function(){
            $('#navigation_horiz ul li').removeClass('active');
            $(this).addClass('active');
            if($(this).children('.dropdown').length>0){
                $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
                $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
                $('#navigation_horiz ul').next('.dropdown').slideDown(500);
                $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
                $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
             }
           },1000);// 1 second delay
      }

マウスを離すと、タイマーをクリアします

$('#navigation_horiz').bind('mouseleave',function(){
 clearTimeout(timer);
于 2013-04-17T13:38:50.390 に答える
0

これには簡単な解決策があります: マウス入力関数の内容をタイムアウトでラップします:

var timer;
$('#navigation_horiz ul li').bind('mouseenter',function(e){
    that = this; //'this' becomes the window when inside the setTimeout callback, so I store it in a variable 'that'
    timer = window.setTimeout(function(){ //Wrap the contents of the mouse enter function in a timeout.
        $('#navigation_horiz ul li').removeClass('active');
        $(that).addClass('active'); // I have replace all "$(this)"'s with "$(that)"'s
        if($(that).children('.dropdown').length>0){
            $('#navigation_horiz ul').next('.dropdown').attr('id',$(this).children('.dropdown').attr('id'));    
            $('#navigation_horiz ul').next('.dropdown').html($(this).children('.dropdown').html());
            $('#navigation_horiz ul').next('.dropdown').slideDown(500);
            $('#navigation_horiz ul').next('.dropdown').children().css('opacity',0);
            $('#navigation_horiz ul').next('.dropdown').children().animate({opacity:0},0).animate({opacity:1},800,'linear');
        }
    }, 500);
});

mouseleave でタイムアウトをクリアする必要があります。

$('#navigation_horiz').bind('mouseleave',function(){
    window.clearTimeout(timer);
});

ソース

MDN - window.setTimeout()

于 2013-04-17T13:39:04.433 に答える