1

我目前正在开发一个 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>

任何帮助是极大的赞赏。谢谢！

- 标记

4

2 回答 2

0

首先，hover接受两个函数参数（一个用于鼠标悬停，一个用于鼠标移出）。其次，我将推荐使用on：

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

通过 jQuery 的制衡，如果li没有 child就会返回ul。

于 2012-07-30T19:27:03.147 回答
0

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

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

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

干杯，

于 2012-07-30T20:24:25.763 回答