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

我的网站上的下拉菜单有一个小问题。（）当鼠标刚好在菜单外时，菜单就会消失，我必须回到顶部。当菜单有3或4个级别时，这可能有点烦人。有没有办法在菜单上加个延迟，这样它就不会马上消失

谢谢你

（不久前，我曾试图在Wordpress论坛上解决这个问题，但我们没有成功。无论如何，这里有一个链接，您可以看到我们尝试了哪些解决方案：）

------编辑（我包括我在这里尝试过的内容）：-------------------

我找到了这个文件：wp content-->themes-->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);
});

这段代码使菜单下拉菜单在您第一次悬停时变慢。第二次悬停时，它似乎已经被打开，所以它会弹出。但是下滑的趋势没有改变。当我用鼠标点击菜单时，它仍然消失了

---

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

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

，您必须将

li:hover

的所有实例替换为

li。hover

，这将使子菜单在光标远离它们时保持在位

完成后，更新

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);
       }
   });
});

---

你应该在你的问题（）中包括你尝试过的东西和你网站的当前代码。好的，谢谢你的提示完成：）嗨，考拉·德夫！谢谢你的回答。我试过了，但没用。您的代码使菜单打开（或下拉）变慢，但一旦我用鼠标点击它，菜单就会像以前一样消失。出于某种原因，此代码还删除了菜单中的箭头，这些箭头有助于指示子菜单的位置。无论如何，谢谢你的尝试。：）编辑：在问题的第一个代码中，我插入了文件的全部代码，而不仅仅是“/*下拉菜单*/”-再次插入partHi！我像你说的那样编辑了style.css文件。我创建了新的.js文件（我称之为delaymenu.js），并将其与methods.js放在同一个文件夹中。到目前为止，菜单的行为与以前一样。如何在我的站点中包含新文件？我总是编辑已经存在的文件，所以我不知道如何（对不起，我知道我是一个nood:p）编辑主题文件夹中的

footer.php

，我想你会在那里找到包含

methods.js

的行，所以复制并粘贴到下面只要将文件名更改为

delaymenu.js

Hi，我在

footer.php

中没有找到

methods.js

，所以我去搜索它（每个php文件中的Cntl-F:p）。。我发现

methods.js

只有一个地方，在

主题-->rumput-hijau-->中包括-->enqueue.php

，
它就像：

wp\u-enqueue\u脚本（'rumputhijau-methods'，get\u-template\u-directory\u-uri（）。/js/methods.js'，array（'jquery'），'20120615'，true）。。于是我尝试（可能是随机地）添加：
wp_enqueue_脚本（'rumputhijau delaymenu'，get_template_directory_uri（）。/js/delaymenu.js'，array（'jquery'），'20120615'，true），但再次-我的网站没有更改。