带有延迟的jQuery菜单

Question

我正在您在屏幕截图中看到的菜单上工作

在线程之后你会看到我用来运行菜单的代码，但现在我有一点可用性问题：/ 当我试图从菜单链接“FÜRBÜRGER”悬停到菜单链接“Umwelt＆amp; Natur”时，我触摸菜单链接“FürBesucher”的机会为100％，弹出窗口改变......

所以我想到了一些延迟，但我不知道如何让延迟正常工作......

有人对此有所了解吗？

/* initalisierung des Main Menü Designs */
$('#zone-menu div.menu-block-wrapper.menu-block-3').append('<div class="dropdown-background"></div>');
$('#zone-menu li.menu-depth-1 a').addClass('menu-depth-1');
$('#zone-menu li.menu-depth-2 a').removeClass('menu-depth-1');
$('#zone-menu li.menu-depth-2 a').addClass('menu-depth-2');

var i= 0;
$('.front #zone-menu li.menu-depth-1 a.menu-depth-1').each(function(){
        i++;
        $(this).addClass('main-link-'+i);
       var text = $(this).attr("title");
       var w = $(this).width() + 12;
       if(!text){ text = 'Description text noch nicht bekannt.'}
       $(this).after('<div class="discription-a-deth-1">'+text+'</div>');
      });
var max_heightA = 0;
$('#zone-menu li.menu-depth-1 a.menu-depth-1').each(function(e) {
  h = $(this).height();
  if(typeof(h) != "undefined") {
        if(h > max_heightA) {
                max_heightA = h+12;
        }
  }
});
if(max_heightA > 0) {
 $('#zone-menu li.menu-depth-1 a.menu-depth-1').height(max_heightA);
}
var q = 0;
$('#zone-menu li.menu-depth-1.expanded').each(function(){
q = 0;
var thisOne = $(this).children('ul');
var max = thisOne.children('li').length;
thisOne.children('li').each(function(max){
        q++;
        $(this).addClass('submenu-link-'+q);

      });
thisOne.prepend('<ul class="spalte-1"></ul><ul class="spalte-2"></ul><ul class="spalte-3"></ul>');
var thisULone =thisOne.children('ul.spalte-1');
var thisULtwo =thisOne.children('ul.spalte-2');
var thisULthree =thisOne.children('ul.spalte-3');
thisOne.children('.submenu-link-1').remove().appendTo(thisULone);
thisOne.children('.submenu-link-2').remove().appendTo(thisULone);
thisOne.children('.submenu-link-3').remove().appendTo(thisULone);
thisOne.children('.submenu-link-4').remove().appendTo(thisULone);
thisOne.children('.submenu-link-5').remove().appendTo(thisULtwo);
thisOne.children('.submenu-link-6').remove().appendTo(thisULtwo);
thisOne.children('.submenu-link-7').remove().appendTo(thisULtwo);
thisOne.children('.submenu-link-8').remove().appendTo(thisULtwo);
thisOne.children('.submenu-link-9').remove().appendTo(thisULthree);
thisOne.children('.submenu-link-10').remove().appendTo(thisULthree);
thisOne.children('.submenu-link-11').remove().appendTo(thisULthree);
thisOne.children('.submenu-link-12').remove().appendTo(thisULthree);
      });
/* 
// Dropdown fürs Main Menü */



    function showThis(){
    $(this).removeClass('entered');
    $('#zone-menu .menu-block-wrapper.menu-block-3 .menu-depth-1 ul.main-menu').css('display', 'none');
    var Child = $(this).children('ul#main-menu');
    if($('.dropdown-background').hasClass('open')){
    Child.css('display', 'block');
     }
     else{

     setTimeout(function(){ Child.css('display', 'block');}, 400);
     }
    $('.dropdown-background').addClass('open');
    $('.dropdown-background').slideDown("slow");    

    $(this).addClass('entered');
    $(this).bind('mouseleave', function(){$(this).removeClass('entered');$('#zone-menu .menu-block-wrapper.menu-block-3 .menu-depth-1 ul.main-menu').css('display', 'none');});
    $('#zone-menu .menu-block-wrapper.menu-block-3').bind('mouseleave', function(){
    $(this).removeClass('entered');

    $('.dropdown-background').removeClass('open');
    setTimeout(function(){ $('#zone-menu .menu-block-wrapper.menu-block-3 .menu-depth-1 ul.main-menu').css('display', 'none');}, 400);
    $('.dropdown-background').slideUp("slow");
});

    }

    function hideThis(){
    $(this).removeClass('entered');


    }
$('#zone-menu li.menu-depth-1').bind('mouseenter', function(){$(this).children('.discription-a-deth-1').addClass('hoverThis');});
$('#zone-menu li.menu-depth-1').bind('mouseleave', function(){$(this).children('.discription-a-deth-1').removeClass('hoverThis');});



  var config = {    
     over: showThis,/*   function = onMouseOver callback (REQUIRED)     */
     timeout:400,/*  number = milliseconds delay before onMouseOut     */
    out: hideThis, /*  function = onMouseOut callback (REQUIRED)     */
};
$('#zone-menu li.menu-depth-1.expanded').hoverIntent( config );

Answer 1

或许可以看到：http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown 的 _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ____ - https://github.com/kamens/jQuery-menu-aim#readme