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/

Answer 1

您正在处理我的处理程序中的事件，您需要这样做：

 $(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');
  });
});

我还更新了你的小提琴，检查它现在有效。

这是我的小提琴：

http://jsfiddle.net/6e87Lwkb/7/

Answer 2

考虑将你的ul子菜单放在你的li中，然后重新定位它。不要忘记使用.stop（），因为jquery不会对幻灯片动画进行排队：

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

See your updated fiddle here

Answer 3

尝试使用此代码。

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

无法保持jQuery下拉列表滑落

3 个答案: