Question

          (function($){

            //cache nav
            var nav = $("#topNav");

            //add indicator and hovers to submenu parents
            nav.find("li").each(function() {
                if ($(this).find("ul").length > 0) {
                    $("<span>").text("^").appendTo($(this).children(":first"));

                    //show subnav on hover
                    $(this).mouseenter(function() {
                        $(this).find("ul").stop(true,true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function() {
                        $(this).find("ul").stop(true,true).slideUp();
                    });
                }
            });
        })(jQuery);

以下是我用于子菜单的slideUp和SlideDown的代码。但是当我继续在菜单上滑动以向下滑动并向上滑动时，菜单会有波动。

Answer 1

之前我观察过这种行为，我只能通过使用jQuery UI库来实现对hide / show的影响来找到合适的解决方案。

如果您包含jQuery UI库，则可以使用以下代码，这些代码可能不是最佳代码，但不会闪烁或波动。

//cache nav
var nav = $("#topNav");

//add indicator and hovers to submenu parents

nav.find("li").each(function() {
    if ($(this).find("ul").length > 0) {
        $("<span>").text("^").appendTo($(this).children(":first"));
        var $subMenu = $(this).find("ul");
        //show subnav on hover
        $(this).hover(
            function() {
                // --> this causes flicker $subMenu.stop(true,true).slideDown();
                $subMenu.stop(true,true).show("slide", {direction: "up"});
            },
            function() {
                // --> this causes flicker $subMenu.stop(true,true).slideUp();
                $subMenu.stop(true,true).hide("slide", {direction: "up"});
            }
        );
    }
});

http://jsfiddle.net/3leven11/k7akm/2/

当我快速移动菜单栏上的鼠标指针向下滑动并向上滑动时，它会发生波动

1 个答案: