2

我的网站上的下拉菜单有一个小问题。( http://tornaia.com ) 当鼠标刚刚在菜单外时，菜单消失，我必须回到顶部。当菜单有 3 或 4 个级别时，这可能有点烦人。有什么方法可以延迟菜单，使其不会立即消失吗？

谢谢！

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

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

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

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

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

4

1 回答 1

2

Try this:

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

UPDATE

Ok so I think I finally got this to work, it was more complicated than I thought but I believe i found a solution, it may not be the best implementation but here it goes:

First you need to update your themes CSS file located in http://tornaia.com/wp-content/themes/rumput-hijau/style.css, you have to replace all instances of li:hover with li.hover, this will make the sub-menus stay in position when the cursor is away from them.

Once that's done, update methods.js, replace the current hover handler with this one:

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

Note: Don't remove anything else from methods.js, the last time the arrows disappeared because you probably remove the line where the class arrow is added.

UPDATE 2

I think I found a cleaner solution, you still need to modify the CSS as I explained before, then you can add this to a new .js file and include it in your site after methods.js, no need to modify it

$(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);
       }
   });
});
于 2013-07-06T21:46:28.257 回答