无法保持jQuery下拉列表滑落

时间:2015-12-14 12:20:12

标签: javascript jquery drop-down-menu

所以我正在为某个人创建一个网站,我对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/

3 个答案:

答案 0 :(得分:2)

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

 $(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/

答案 1 :(得分:1)

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

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

See your updated fiddle here

答案 2 :(得分:0)

尝试使用此代码。

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