Question

我从菜单中删除鼠标指针的那一刻，一切都消失了，我觉得很烦人。我想要稍微延迟一点，以便当我不小心滑出它或者使用hoverIntent时菜单更宽容。问题是，无论我多少谷歌它，我找不到任何地方有一个指南可以理解我。对于javascripting，我是一个真正的新手。：）

我在scripts.js下找到了这个，我认为是控制菜单悬停属性的编程：

// STARTS MEGA MENU
var temp, menu = jQuery("#navigation .menu");
menu.find("li").hover(function(){
    jQuery(this).children('.children').hide().slideDown('normal');
    if(jQuery(this).hasClass('mega-item'))
        jQuery(this).children('.children').find('.children').hide().slideDown('normal');
    try{
        $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
        if($tmp>0){
            jQuery(this).children('.children').css("right","0");
        }
    }
    catch(e){}
},function(){
    jQuery(this).children('.children').stop(true,true).hide();
}); 

menu.children("li").each(function(){
    temp = jQuery(this);
    if(temp.children().hasClass("children"))
        temp.addClass("showdropdown");

    if(temp.hasClass('rel'))
        temp.find('.children').append('<span class="mg-menu-tip" style="width:'+temp.width()+'px"></span>');
    else
        temp.find('.children').append('<span class="mg-menu-tip" style="left:'+(temp.position().left-20)+'px;width:'+temp.width()+'px"></span>');
});


menu.find(".children.columns").each(function(){
    $countItems=1;
    jQuery(this).children(".mega-item").each(function(){
        temp = jQuery(this);
        if(temp.hasClass("clearleft")){
            $countItems=4;
        }else if(($countItems%3)==1 && $countItems!=1){
            temp.addClass("clearleft");
        }
        $countItems++;
    });
});
$i = 0;
menu.find(">li>ul.children").each(function(){
    jQuery(this).find('>li>ul.children').parent().find('>a>span').addClass('menu-span-arrow').html('â–º');
});
menu.find("ul.children>li").hover(function(){
    jQuery(this).children("ul.children").css('left', (jQuery(this).width()-5)+"px");       
});
// END MEGA MENU

我很抱歉，如果这可能是一个相当具体的问题，但每次我尝试实施其他人的问题时，我都会崩溃我的网站：P

提前致谢！

修改我把hoverIntent在functions.php下注册为

wp_register_script('hoverIntent2', get_template_directory_uri() . '/js/jquery.hoverIntent.js');

稍后排队 wp_enqueue_script（ 'hoverIntent2'）;

Answer 1

Sooo我请求我的朋友帮助我，一小时左右后，这就是我们最终得到的结果（我很满意:)：

// STARTS MEGA MENU
var temp, menu = jQuery("#navigation .menu");
var menu_show = false;
var menu_timeout;
var menu_object;

menu.find("li").not('.mega-item').hover(function(){
    jQuery(this).children('.children').hide().slideDown('normal');
    if(jQuery(this).hasClass('mega-item'))
        jQuery(this).children('.children').find('.children').hide().slideDown('normal');
    try{
        $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
        if($tmp>0){
            jQuery(this).children('.children').css("right","0");
        }
    }
    catch(e){}
},function(){
    jQuery(this).children('.children').stop(true,true).hide();
}); 

jQuery('#menu-item-2462').hover(function(){

    clearTimeout(menu_timeout);

    menu_object = jQuery(this).children('.children');

    if(!menu_show) {
        menu_show = true;

        jQuery(this).children('.children').hide().show();
        if(jQuery(this).hasClass('mega-item'))
            jQuery(this).children('.children').find('.children').hide().show();
        try{
            $tmp=(jQuery(this).children('.children').offset().left+jQuery(this).children('.children').width())-(jQuery("#header .twelve").offset().left+jQuery("#header .twelve").width());
            if($tmp>0){
                jQuery(this).children('.children').css("right","0");
            }
        } catch (e) {}
    }
},function(){

    menu_timeout    = setTimeout(function() { menu_object.stop(true,true).hide(); menu_show = false;} , 500);



}); 



menu.children("li").each(function(){
    temp = jQuery(this);
    if(temp.children().hasClass("children"))
        temp.addClass("showdropdown");

    if(temp.hasClass('rel'))
        temp.find('.children').append('<span class="mg-menu-tip" style="width:'+temp.width()+'px"></span>');
    else
        temp.find('.children').append('<span class="mg-menu-tip" style="left:'+(temp.position().left-20)+'px;width:'+temp.width()+'px"></span>');
});


menu.find(".children.columns").each(function(){
    $countItems=1;
    jQuery(this).children(".mega-item").each(function(){
        temp = jQuery(this);
        if(temp.hasClass("clearleft")){
            $countItems=4;
        }else if(($countItems%3)==1 && $countItems!=1){
            temp.addClass("clearleft");
        }
        $countItems++;
    });
});
$i = 0;
menu.find(">li>ul.children").each(function(){
    jQuery(this).find('>li>ul.children').parent().find('>a>span').addClass('menu-span-arrow').html('►');
});
menu.find("ul.children>li").hover(function(){
    jQuery(this).children("ul.children").css('left', (jQuery(this).width()-5)+"px");       
});
// END MEGA MENU

我希望这有助于某人！最好的问候：）

在wordpress中添加延迟大型菜单悬停

1 个答案: