0 
          (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に使用しているコードですが、メニューでスライドを続けてスライドダウンとスライドアップすると、メニューが変動します。

4

1 に答える 1

0

私は以前にこの動作を観察しましたが、jQuery UI ライブラリを使用して非表示/表示に影響を与えることによってのみ、適切な解決策を見つけることができました。

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/

于 2013-05-07T08:07:05.550 に答える