Question

我有一个Wordpress网站，我试图添加带有子菜单的jQuery菜单。

这是jQuery：

$(document).ready(function(){
   $('.menu > li').hover(function(){
      var position = $(this).position();
      $('.sub-menu', this).css('margin-left', position.left);
      $('.sub-menu', this).slideToggle('slow');
   });
});

我也在JSFiddle上设置了它：http://jsfiddle.net/K96mB/

问题是，如果将鼠标悬停在某个链接上，子菜单会一次又一次地滑入和滑出，从而产生“反弹效果”。我一直试图摆脱这个，但无法弄清楚如何。

此外，是否有可能永远不会同时打开两个下拉菜单？

感谢您的帮助。

Answer 1

解决＆＃34;弹跳＆＃34;问题：

$('.sub-menu', this).stop().slideToggle('slow');

http://jsfiddle.net/DerekL/K96mB/1/

关于你说你不想同时打开两个下拉菜单的说法，这是可能的，但我不认为你想要那个，因为第二个菜单必须等待第一个关闭然后打开（滞后）。

Answer 2

这没有弹跳效果：

$(document).ready(function(){
 $('.menu > li').mouseenter(function(e){
   var position = $(this).position();
   $('.sub-menu', this).css('margin-left', position.left);
   $('.sub-menu', this).slideToggle('slow')

   });
});

我使用的是mouseenter而不是悬停

此外，是否有可能永远不会同时打开两个下拉菜单？是的，添加以下代码：

$('li').mouseleave(function(e){
    $('.sub-menu').hide()
});

Answer 3

您可以使用mouseenter和mouseleave来实现此目的。请参阅 this jsfiddle （您的更新）。

下拉弹跳问题

3 个答案: