jQuery技术:jQuery $ .hover用于导致“弹跳”的子菜单

我在使用jQueryhover方法时遇到了一些麻烦。

这是相关的JavaScript代码:

$("#navigation > li > ul").hide(); $("#navigation > li").hover( function() { $(this).children("ul").slideDown(125); }, function() { $(this).children("ul").slideUp(125); } ); 

这是相应的HTML:

  

每当您将鼠标hover在顶级项目上时,其中的子菜单(如果有)将下拉并具有漂亮,快速的幻灯片效果。 问题是当你快速鼠标hover在菜单中并将鼠标放在菜单所在但尚未到达的位置时:菜单将点击鼠标hover动画的“结束”并弹回到隐藏状态,并重复,直到从下拉菜单中删除鼠标。

    也许在mouseout函数中添加一个检查可能会有所帮助:

     if( !$(this).children("ul").is(":animated") ){ $(this).children("ul").slideUp(125); } 

    您可以尝试使用hoventIntent,这是一个jQuery插件,可帮助检测hover在元素上的用户的意图。

    我用它修改了你的例子,它看起来表现得更好。 我补充说:

      

    并使用hover()修改单行:

     $("#navigation > li").hoverIntent( 

    我无法让它反弹,它感觉更像是一个弹出菜单,应用了hoverIntent行为。

    最后,您可以尝试使用其中一个预先构建的jQuery菜单插件,因为他们已经为您完成了所有这些艰苦工作:)

      以上就是jQuery教程分享jQuery $ .hover用于导致“弹跳”的子菜单相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/532529.html

      (0)
      上一篇 2020年12月21日
      下一篇 2020年12月21日

      精彩推荐