尝试创建一个带有子菜单的 JQuery 菜单，该子菜单在悬停时向上滑动，并在鼠标退出时向下滑动
我发现有人提供了一个教程，展示了我本质上想要的内容，但是，该演示是针对向下滑动的子菜单，而不是让子菜单在菜单项上方向上滑动。
以下是教程的链接：
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 时，反之亦然，该东西可以很好地向上滑动（即使我不切换它们也可以工作）出！） - 但是当我退出时应该发生的下滑并没有真正起作用。就像子菜单消失了，然后下次我将鼠标悬停在它上面时完成它的向下轨迹。
基本上，这一切都是打嗝式的，而且非常不可靠。
大家对这个新手有什么好主意吗？
太感谢了！
I've found someone with a tutorial showing what I'm essentially after, however, the demo is for a submenu that slides down instead of having the the submenu slide up above the menu item.
Here is the link to the tutorial:
http://www.darkscarab.com/blog/read.php?id=14
Here is the jQuery script it uses:
$(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);
}
);
});
When I switch out the slideUp for slideDown and vice versa, the thing works well enough sliding up (works even when I don't switch them out!) - but the slide down that is supposed to happen when I exit doesn't really work. It is like the submenu disappears, and then finishes it's downward trajectory next time I hover on it.
Basically, it is all hiccup-y and very unreliable.
Anyone have any brilliant ideas for this novice?
Thank you so much!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
.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 编写它，并且自己编写它对您很有好处。祝你好运！
.slideDownshows an element starting atheight:0and then animates the height property to its full value..slideUpanimates the height from its full value down to 0 and then hides the element. In order to create the animation that you want you can't just switch them around since you want slideUp to show instead of hide and vice-versa.If I were to build what describe, I would abolutely position an element within a relatively positioned element at
bottom:0so that when I animate the height property it would grow from the bottom. Then I would createfunction mySlideUp()such that it.show()'s the inner element that's initiallydisplay:none; height:0and then.animate({height:'auto'},'slow'). Forfunction mySlideDown()I'd.animate({height:0},'slow')and thenhide().I hope that helps. Wrote it in pseudo-jQuery since you're a novice and it'd be beneficial for you to write it out yourself. Good luck!
对于任何正在寻找像我试图实现的那样的导航菜单的人，以下网站可能会有所帮助：
http ://www.mrbandfriends.co.uk/
但是，根据 mhr 的建议，并研究 B 先生如何编码他们的导航，我终于能够使用面包屑获得可行的向上滚动导航。
谢谢你！
For anyone looking for a navigation menu like the one I was trying to achieve, the following site may be of assistance:
http://www.mrbandfriends.co.uk/
But using mhr's advice, and in looking through how Mr. B coded their navigation, I was finally able to get a workable scroll up navigation with breadcrumbs.
Thank you!