wordpress - 如何延迟我的网站的下拉菜单

Question

我的网站上的下拉菜单有一个小问题。 ( http://tornaia.com ) 当鼠标位于菜单之外时，菜单消失，我必须返回顶部。当菜单有 3 或 4 层时，这可能有点烦人。有没有办法在菜单上设置延迟，这样它就不会立即消失？

谢谢你!

(前段时间我试图在Wordpress论坛中解决这个问题，但我们从未成功。无论如何，这里有一个链接，因此您可以看到我们尝试过的解决方案: http://wordpress.org/support/topic/how-to-delay-the-drop-down-menu-1?replies=10 )

------编辑(我包括我在这里尝试过的内容):--------------------

我找到了这个文件:wp-content --> theme --> rumput-hijau --> js -->methods.js

var $j = jQuery.noConflict();
$j(document).ready(function(){

    /* Reponsive videos */
    $j(".content-right").fitVids();

    /* Reponsive menus */
    $j(".nav").mobileMenu();

   /* Drop down menus */


    $j(".inside-primary-nav ul li ul").parent().addClass("arrow");

    $j(".inside-primary-nav ul li").hover(function(){

        $j(this).addClass("hover");

       $j(this).find("ul:first").slideToggle("fast");

    }, function(){

        $j(this).removeClass("hover");
        $j(this).find("ul:first").slideUp("fast");

    });

});

所以我尝试将最后一行更改为

$j(this).find("ul:first").delay('900').slideUp("fast");

但这弄乱了菜单。然后我尝试了这个

/* Drop down menus */
$j(".inside-primary-nav ul li ul").parent().addClass("arrow");
$j(".inside-primary-nav ul li").hover(function(){
    $j(this).addClass("hover");
    $j(this).find("ul:first").slideDown("slow");
}, function(){
    $j(this).removeClass("hover");
    $j(this).find("ul:first").slideUp("slow");
});

此代码使菜单向下滑动时减慢速度，但当鼠标移开时菜单不再保留。所以这不是我要找的。我希望菜单在您用鼠标离开后仍保持一秒钟(或其他时间)。这样，如果你无意识地离开它，它就不会消失，你还可以继续。然后我尝试了

$j(".inside-primary-nav ul li ul").parent().addClass("arrow");
$j(".inside-primary-nav ul li").hover(function(){
    $j(this).addClass("hover");
    $j(this).find("ul:first").slideDown("slow");
}, function(){
    $j(this).removeClass("hover");
    setTimeout(function() {
    $j(this).find("ul:first").slideUp("slow");
    }, 1000);
});

当您第一次将鼠标悬停在菜单上时，此代码会使菜单下拉速度变慢。第二次将其悬停时，它似乎已经打开，因此它会弹出。但向上滑动并没有改变。当我拿走菜单的鼠标时，它仍然消失。

----------------- 编辑:在问题的第一个代码中，我插入了文件的整个代码，而不仅仅是“/* 下拉菜单 */” -部分

Answer 1

试试这个:

var hoverTimeout = null;

$j(".inside-primary-nav ul li").hover(function(){
    $j(this).addClass("hover");
    $j(this).find("ul:first").stop().slideDown("slow");
    if(hoverTimeout){
        clearTimeout(hoverTimeout);
    }
}, function(){
    $j(this).removeClass("hover");
    hoverTimeout= setTimeout(function() {
        $j(this).find("ul:first").stop().slideUp("slow");
    }, 1000);
});

更新

好吧，我想我终于开始工作了，它比我想象的要复杂，但我相信我找到了一个解决方案，它可能不是最好的实现，但它是这样的:

首先，您需要更新位于 http://tornaia.com/wp-content/themes/rumput-hijau/style.css 的主题 CSS 文件。 ，您必须替换 li:hover 的所有实例与 li.hover ，这将使当光标远 ionic 菜单时保持在原位。

完成后，更新 methods.js ，用这个替换当前的悬停处理程序:

var hoverTimeouts = {}; //Obj to store timeouts
$j(".inside-primary-nav ul li").hover(function(){
    //Clear timeout if present
    if(hoverTimeouts[$j(this).attr('id')]){
        clearTimeout(hoverTimeouts[$j(this).attr('id')]);
        delete hoverTimeouts[$j(this).attr('id')];
    }else{
        //Show sub-menu
        $j(this).find(".sub-menu:first").hide().slideDown("slow"); 
    }
    $j(this).addClass("hover");
    //Hide all other sub-menus in the level and clear their timeouts
    $j(this).siblings().each(function(){
        if(hoverTimeouts[$j(this).attr('id')]){
            clearTimeout(hoverTimeouts[$j(this).attr('id')]);
            delete hoverTimeouts[$j(this).attr('id')];
        }
        $j(this).removeClass('hover').find('.sub-menu').hide();
   });
},function(){
    //if item has sub-menu
    if($j(this).find('.sub-menu').length){
        //Store reference to menu item
        var that = $j(this);
        //Set timeout to remove after 1 sec and add it to obj
        hoverTimeouts[$j(this).attr('id')]= setTimeout(function() {
            that.removeClass("hover");
            delete hoverTimeouts[that.attr('id')];
        }, 1000);
    }else{
        //no sub-menu so just remove hover style
        $j(this).removeClass('hover');
    }
});

注意:请勿从 methods.js 中删除任何其他内容，上次箭头消失了，因为您可能删除了类 arrow 所在的行被添加。

更新2

我想我找到了一个更干净的解决方案，你仍然需要像我之前解释的那样修改CSS，然后你可以将其添加到新的.js中文件并将其包含在 methods.js 之后的网站中，无需修改

$(function(){
    var hoverTimeout = null;
    $j(".inside-primary-nav ul li").unbind();
    $j(".inside-primary-nav ul li").hover(function(){
        $j(this).siblings().each(function(){
            $j(this).removeClass('hover').find('.sub-menu').hide();
            $j(this).find('.hover').removeClass('hover');
        });
        $j(this).addClass("hover");
        //Make sure parent style is ready to show new sub-menu
        $j(this).closest('.sub-menu').css('overflow','visible'); 
        $j(this).find(".sub-menu:first").stop().slideDown("fast");
   }, function(){
       if($j(this).find('.sub-menu:visible').length  === 0)
           $j(this).removeClass("hover");
   });

   $j(".inside-primary-nav > ul > li").hover(function(){
       if(hoverTimeout){
           clearTimeout(hoverTimeout);
       }
   },function(){
       if($j(this).find('.sub-menu:visible').length > 0){
           var that = $j(this);
           hoverTimeout= setTimeout(function() {
               that.removeClass('hover').find('.sub-menu').hide();
               that.find('.hover').removeClass('hover');
           }, 1000);
       }
   });
});