javascript - JQuery 在 Firefox 和 Chrome 中无法正常工作

Question

我目前正在开发一个 ASP.NET 网页，但遇到了我遇到过的最恼人的问题。

过去三天我一直在研究这个问题，找不到任何人遇到过这个问题，更不用说任何解决方案了。

我已经用 HTML/CSS 创建了一个菜单/子菜单，我在子菜单中添加了某种切换效果，使它可以向下滑动或淡入(我都试过了，都产生了相同的结果) .

在 Internet Explorer 中，它运行良好。我可以将鼠标悬停在菜单上，它会向下滑动或正确淡入，然后当我将鼠标移开时它就会消失。

在 Chrome/Firefox 中，我就没那么幸运了。子菜单一开始是隐藏的，然后如果我将鼠标悬停在它上面一次，它就会出现。如果我将鼠标移开，它会立即关闭然后自行重新打开。此时，已无可挽回。如果我将鼠标悬停在它上面，它就会消失，如果我再次将鼠标移开，它就会重新出现。这将持续发生，直到页面重新加载。

这是 HTML 格式的菜单...

<ul id="menu">
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="Services.aspx">Services</a>
            <ul id="submenu">
                <li>Custom CRM</li>
                <li>Website Development</li>
            </ul>
        </li>
        <li><a href="About.aspx">About</a></li>
        <li><a href="Contact.aspx">Contact Us</a></li>
    </ul>

至于与此菜单相关的 CSS，就是这样......

#menu
{
    padding:0;
    text-align: center;
    margin: 0;
    width: 100%;
}

#menu li 
{
    height: 35px;
    float: left;
    list-style: none;   
    width: 25%;
    font-size: larger;
    cursor: pointer;
    position: relative;

}

#menu li a 
{
    display: block;
    height: 35px;
    text-decoration: none;
    color: White;
    font-weight: bold;
    padding-top: 5px;

}

#menu li:hover 
{
    background-color: #4CC417;
}



#menu li:hover ul 
{
    display: block;
}

#menu ul 
{
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 999;
  top: 36px;
  width: 140%;
  display: none;
  list-style: none;
  left: 0;
}

#menu ul li 
{
    text-align: left;
    font-size: medium;
    width: auto;
    float: none;
    background-color: #387C44;
    color: White;
    font-weight: bold;
    padding-left: 5px;

}

#submenu ul 
{
    display: none;
    z-index: 999;

}

#submenu 
{
    display: none;
}

最后，这是我为此创建的 JQuery 代码...

<script type="text/javascript">

    $(document).ready(function () {
        $("#menu ul").parent().hover(function () {
            $("#submenu").stop(true, true).fadeToggle("slow");
        });
    });

</script>

非常感谢任何帮助。谢谢!

--马克

Answer 1

http://jsfiddle.net/9LEMZ/3/

这是你的追求吗？ (如果没有，请随时指导我!)

我已完全更改 jquery 以淡入子元素，最初隐藏子菜单。还从 css 中删除了 display:none 以帮助解决这个问题(因为它现在通过 .hide() 隐藏了)

干杯，