jQuery：下拉导航 slideDown 和 slideUp

Posted 2023-05-08

【中文标题】jQuery：下拉导航 slideDown 和 slideUp

【英文标题】：jQuery: Dropdown navigation slideDown and slideUp

【发布时间】：2013-09-10 22:36:38

【问题描述】：

我有一个下拉导航。我希望下拉菜单在用户悬停“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");
);

【参考方案1】：

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

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

【讨论】：

不幸的是，这对我不起作用，但这是因为我的情况有点不同。但是，我找到了一个解决方案，您可以在“编辑：”之后的帖子中找到它：)

【参考方案2】：

所有你需要的：

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