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);
        }
    );
});

当我为slideDown切换slideUp时，反之亦然，这个东西可以很好地向上滑动（即使我没有将它们切换出来也能正常工作！） - 但是当我退出时应该会发生滑落真的有用。这就像子菜单消失了，然后在我下次悬停它时完成下行轨迹。

基本上，它都是打嗝而且非常不可靠。

对于这个新手，任何人都有什么好主意吗？

非常感谢你！

Answer 1

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

如果我要构建描述的内容，我会将一个元素放在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先生如何编码导航时，我终于能够通过面包屑获得可行的向上滚动导航。

谢谢！

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

2 个答案: