尝试创建一个带有子菜单的 JQuery 菜单，该菜单在悬停时向上滑动，在鼠标退出时向下滑动

Question

我发现有人提供了一个教程，展示了我的基本目标，但是，该演示是针对一个向下滑动的子菜单，而不是让子菜单向上滑动到菜单项上方。

这里是教程的链接：

http://www.darkscarab.com/blog/read.php?id=14

这是它使用的 jQuery 脚本：

$(document).ready(function(){
    $(".submenu").slideUp(100, function(){$(".menu_item").css({overflow:'visible'})});
    $(".menu_item").hover(
        function(){
            if($(".submenu", this).queue().length < 2)
                $(".submenu", this).slideDown(500);
        },function(){
            $(".submenu", this).slideUp(500);
        }
    );
});

当我将 slideUp 切换为 slideDown 时，反之亦然，它向上滑动的效果很好（即使我不切换它们也可以工作！） - 但是当我退出时应该发生的向下滑动不会' t 真的有效。就像子菜单消失了，然后在我下次悬停在它上面时完成它的下降轨迹。

基本上，这都是打嗝，非常不可靠。

有人对这个新手有什么绝妙的想法吗？

非常感谢！

Answer 1

.slideDown 显示从height:0 开始的元素，然后将 height 属性设置为完整值。 .slideUp 将高度从其完整值设置为 0，然后隐藏元素。为了创建您想要的动画，您不能只是切换它们，因为您希望 slideUp 显示而不是隐藏，反之亦然。

如果我要构建所描述的内容，我会绝对将一个元素定位在bottom:0 的相对定位元素中，这样当我为 height 属性设置动画时，它会从底部增长。然后我将创建function mySlideUp()，这样它.show() 的内部元素最初是display:none; height:0，然后是.animate({height:'auto'},'slow')。对于function mySlideDown()，我会选择.animate({height:0},'slow')，然后是hide()。

我希望这会有所帮助。因为你是新手，所以用伪 jQuery 写的，你自己写出来对你有好处。祝你好运！

Answer 2

对于任何寻找类似我试图实现的导航菜单的人，以下网站可能会有所帮助：

http://www.mrbandfriends.co.uk/

但是根据 mhr 的建议，并查看 B 先生如何编写导航，我终于能够获得一个可行的带有面包屑的向上滚动导航。

谢谢！