无法保持jQuery下拉菜单向下滑动

Question

我正在为某个人制作网站，而且我对jQuery相当陌生（这可能不太有帮助）。该网站需要一个下拉菜单来显示图库链接列表，而不是将它们都放在导航栏中。问题是，每当我悬停在li元素上时，下拉菜单会展开，但是当我悬停在下拉菜单上时，它又会收起。

$(document).ready(function () {
  $("li#navi-dropdown").hover(
    function () {
      $('ul.nav-dropdown').slideDown('medium');
    }, 
    function () {
      $('ul.nav-dropdown').slideUp('medium');
    }
  );
});

可能是一些简单的东西，但帮助仍然非常受欢迎。下面是JSFiddle。

http://jsfiddle.net/6e87Lwkb/

- jammehcow

---

为什么不使用前端框架，而是使用纯html、css和jquery？ - Firnas

http://codepen.io/firnasfaris10/pen/PZPVgG - Firnas

Answer 1

您正在me处理程序中切换事件，您需要执行以下操作：

 $(document).ready(function () {
    $("li#navi-dropdown").on('mouseover',function () {
     $('ul.nav-dropdown').slideDown('medium');
  })

  $("ul.nav-dropdown").on('mouseleave',function () {
     $('ul.nav-dropdown').slideUp('medium');
  });
});

我已经更新了你的 fiddle，请查看，它现在可以工作了。

这是我的 fiddle： http://jsfiddle.net/6e87Lwkb/7/

- Franco

---

@Mohamed，我真的不明白你的评论（以及最终的负评）是什么意思，你有检查过这个fiddle吗？我认为这就是OP所问的，他说：“问题是，每当我悬停在li元素上时，下拉菜单会滑下来，但当我悬停在下拉菜单上时，它会滑回去。”，而这正是我所做的。我还改变了他自己的fiddle，在那里他只是切换事件，这就是为什么你认为我的答案不正确的原因。 - Franco

@Mohamed，更改原始的OP小样可能不是一个好习惯。人们在这里不断学习，当我发布答案时，我将不再这样做。感谢您更新您的评论。干杯 :) - Franco

Answer 2

考虑将您的 ul 子菜单放在 li 内，并重新定位它。别忘了使用 .stop()，这样 jQuery 就不会使您的幻灯片动画排队：

$('ul.nav-dropdown').stop().slideDown('medium');

"

在这里查看您更新的代码片段

"

- Robin Leboeuf

---

与其他不同，如果您没有悬停在下拉菜单上，而仅仅将鼠标从库按钮上移开，下拉菜单仍然会消失，这正是我想要的。谢谢大家的回复，但这个似乎是最完整的。 - jammehcow

Answer 3

试试这段代码。

$(document).ready(function () {
    $("li#navi-dropdown").hover(
  function () {
     $('ul.nav-dropdown').slideDown('medium');
  });
  $(".nav-dropdown").mouseleave(
  function () {
     $('ul.nav-dropdown').slideUp('medium');
  });
});

- JengGe Chao