jQuery：下拉导航 slideDown 和 slideUp

Question

我有一个下拉导航。我希望下拉菜单在用户悬停“a”标签时滑动，并在鼠标离开下拉菜单或“a”标签时滑动。问题是，如果我这样写代码：

 $("#pageBottomNav ul li a").hover(function () {
    $(this).parent().children("ul#subNav").slideDown();
}, function() {
  $(this).parent().children("ul#subNav").slideUp();
 }
);

仅当我将鼠标悬停在“a”标签上时，下拉菜单才会显示，当我尝试将鼠标悬停在下拉菜单上时，它会再次向上滑动，因为上面代码的 mouseleave 事件。

另一方面，如果我这样写代码：

 $("#pageBottomNav ul li a").mouseenter(function () {
    $(this).parent().children("ul#subNav").slideDown();
});

$("#pageBottomNav ul li ul#subNav").mouseleave(function () {
    $(this).slideUp();
});

下拉菜单正确打开，但仅当用户将鼠标悬停在其上时才会关闭。但是，如果用户将鼠标悬停在“a”标签上而没有悬停在 #subNav 上，则下拉菜单不会关闭。

编辑： 问题是我处理了锚标签的悬停事件，而我应该对其父标签做同样的事情 - 列表项 (li) 标签。我改变了它们，一切正常。查看下面的代码：

 $("#pageBottomNav ul li").hover(
    function () {
        $(this)
            .find("ul")
        .stop(true, true)
        .slideDown("easeInQuart");
},
    function () {
        $(this)
        .find("ul")
        .stop(true, true)
        .slideUp("easeInQuart");
});

Answer 1

这是我用来做类似事情的代码。不要定位 'a' 元素，只需使用整个 div。

$("#subnav").hover(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=92'
        }, 'fast' 
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '-=92px'
        }, 'fast'
      );
    }
  );

Answer 2

所有你需要的：

$("#pageBottomNav ul li").hover(function () {
    $(">ul", this).stop().slideToggle();
});