如何修复这个JQuery下拉菜单？ [英] How to fix this JQuery dropdown menu?

问题描述

我试图在JQuery中创建一个下拉菜单，但这是非常困难的。

我的代码在这里：

  $（document） （function（）{
 
 $（'ul li'）。mouseover（function（）
 {
 $（this）.children（ul）。 ; 
}）; 
 $（'ul li ul'）。mouseover（function（）
 {
 $（'ul li ul'）。show（）; 
}）。mouseout（function（）{
 $（'ul li ul'）。hide（）; 
}）; 
 
}）; 
  

基本上我想将鼠标悬停在一个列表项目上，然后将子ul放下，然后我可以将鼠标悬停在列表项目上，如果鼠标从子导航关闭，菜单将再次隐藏。

谢谢，
Keith

更新：我从CSS中移除了边框，它工作正常，所以当我将鼠标悬停在1px边框上时，它会显示mouseout是非常奇怪的。

解决方案

您是否知道 superfish ？它是菜单jQuery插件与卓越的跨浏览器支持。它绝对没有你遇到的问题。我没有检查源代码，但关键的区别是它在mouseout上增加了一个延迟。这意味着一个动作不被触发，除非光标的位置稳定一段时间（默认延迟为800ms）。这将解决您的问题，也是一个很好的实现，因为它将使您的菜单更方便用户。

I tried to create a dropdown menu in JQuery, but it's proving quite difficult.

My code is here:

  $(document).ready(function(){

        $('ul li').mouseover(function()
        {
              $(this).children("ul").show();
        });
        $('ul li ul').mouseover(function()
        {
              $('ul li ul').show();
        }).mouseout(function(){
              $('ul li ul').hide();
        });

  });

Basically I want to hover over a list item and the sub ul to drop down, then I can hover over the list items and If the mouse goes off of the sub nav, the menu hides again.

thanks, Keith

UPDATE: I removed the border from the CSS and it works fine, so it appears the mouseout is triggered when I hover over the 1px border, quite weird.

解决方案

Are you aware of superfish? It is menu jQuery plug-in with excellent cross-browser support. It definitely doesn't have the problem you are experiencing. I haven't checked the source code, but the key difference is that it adds a delay on mouseout. This means that an action isn't triggered, unless the position of the cursor is steady for some time (default delay is 800ms). This will solve your problem and is also a good thing to implement, as it will make your menu more user-friendly.

这篇关于如何修复这个JQuery下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！