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

首先，hover接受两个函数参数（一个用于鼠标悬停，一个用于mouseout）。其次，我建议使用on：

$('#menu > li').on({
  mouseover: function() {              
    $(this).children('ul').slideDown(300);
  },
  mouseout: function() {
    $(this).children('ul').stop(true, false).hide();
  }
});

通过jQuery的检查和平衡，如果li没有子ul，它将会返回。

Answer 2

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

这是你的追求吗？（如果没有，请随时指导我！）

我已经完全改变了jquery以淡化子元素，最初隐藏了子菜单。同时删除了显示：没有来自css以帮助这个（因为它现在通过.hide（）隐藏了）

干杯，

JQuery在firefox和chrome中无法正常工作

2 个答案: