Question

我有一个包含多个链接的菜单，在悬停下拉菜单时向下滑动。每个链接都有自己的下拉列表。我的问题是，当您通过将鼠标移入和移出悬停大小来调用大量事件时，即使停止悬停，它也会一直上下滑动。

setInterval(function(){

    if($("header nav ul li.product:hover").length != 0){
        $("header .dropdown-support").slideUp("slow", function(){
            alert();
            $("header .dropdown-product").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-product").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-product").slideUp();
        }
    }

    if($("header nav ul li.support:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-support").slideUp();
        }
    }

    if($("header nav ul li.store:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
        $("header .dropdown-support").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-store").slideUp();
        }
    }
}, 500);

与此jsfiddle相似：http://jsfiddle.net/amkrtchyan/4jxph/2/

任何人都知道如何实现这一目标？感谢

Answer 1

使用jquery.stop()功能：

$("header .dropdown-support").stop().slideUp(500, function(){
    $("header .dropdown-store").stop().slideDown();
});

希望这会有所帮助......

悬停时JQuery下拉菜单

1 个答案: