0

我在这里有这个例子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");
        });
    });
});
4

1 回答 1

1

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

这是jsFiddle。

首先，您不需要使用回调函数来操作 css display: block/none，slideUp/slideDown因为这些方法hides/shows $(this)在完成后会自动元素。

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

第三：不要忘记定义top:0; left:0;何时position使用protert。如果您不定义顶部/左侧值，它将在某些浏览器上产生冲突。

$(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);
        }
    });
});
于 2013-01-24T15:46:03.077 回答