Question

我有一个这个例子http://jsfiddle.net/65R8q/2/用于多级子菜单，但它没有显示，因为使用stop（）使第一个子菜单稳定如何解决这个问题？

$(document).ready(function () {
    $(".cat").mouseover(function () {
        $(".sub1").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });

    $(".cat").mouseout(function () {
        $(".sub1").slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".sub1").mouseover(function () {
        $(this).css("display", "block").stop();
    });

    $(".sub1").mouseout(function () {
        $(this).slideUp(500, function () {
            $(this).css("display", "none");
        });
    });

    $(".item2").mouseover(function () {
        $(".sub2").slideDown(500, function () {
            $(this).css("display", "block");
        });
    });
});

Answer 1

我清除了很多css错误和许多jQuery冲突。最后我设法解决了这个问题。

Here is jsFiddle.

首先所有你不需要使用在display: block/none之后操纵css slideUp/slideDown的回调函数，因为这些方法在完成后自动hides/shows $(this)元素。 / p>

第二：您应该选择包装元素来触发导航。在您的示例中，您选择小元素.cat，这是错误的。您应该选择包含整个导航的最大元素。在您的示例中：.menu

第三：当top:0; left:0;使用protert时，不要忘记定义position。如果您没有定义top / left值，则会在某些浏览器上产生冲突。

$(document).ready(function(){
    $('.menu').bind({
        mouseenter: function() {
            $(".sub1").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub1").slideUp(500);
        }
    });

    $('.item2').bind({
        mouseenter: function() {
            $(".sub2").stop(true,false).slideDown(500);
        },
        mouseleave: function() {
            $(".sub2").slideUp(500);
        }
    });
});

多级菜单未显示

1 个答案: