Question

我有一个下拉导航。当用户悬停“a”标签时，我希望下拉菜单为slideDown，当鼠标离开下拉列表或“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();
});

jQuery：下拉导航slideDown和slideUp

2 个答案: