Question

我的网站上的下拉菜单存在一个小问题。（http://tornaia.com）当鼠标就在菜单外面时，菜单会消失，我必须回到顶部。当菜单有3或4级时，这可能有点烦人。是否有某种方法可以延迟菜单，以便它不会立即消失？

谢谢！

（前一段时间我试图在Wordpress论坛中解决这个问题，但我们从未做过。无论如何这里是一个链接，所以你可以看看我们尝试了哪些解决方案：http://wordpress.org/support/topic/how-to-delay-the-drop-down-menu-1?replies=10）

------编辑（我倾注我在这里尝试过的）：-------------------

我找到了这个文件：wp-content - ＆gt;主题 - ＆gt; rumput-hijau - ＆gt; js - ＆gt; 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);
});

此代码使您第一次悬停时菜单下拉速度变慢。你第二次悬停它似乎它已经被打开，所以它只是弹出。但是上滑不会改变。当我拿着菜单的鼠标时，它仍然消失。

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

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，这将使子菜单保持在原位光标远离它们。

完成后，更新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);
       }
   });
});

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

1 个答案: