Question

我尝试在JQuery中创建一个下拉菜单，但事实证明这很难。

我的代码在这里：

  $(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();
        });

  });

基本上我想将鼠标悬停在列表项上并将子ul拖放到下拉列表中，然后我可以将鼠标悬停在列表项上，如果鼠标离开子导航，则菜单会再次隐藏。

感谢，基思

更新：我从CSS中移除了边框并且它工作正常，因此当我将鼠标悬停在1px边框上时会出现鼠标输出，非常奇怪。

Answer 1

您应该使用jQuery's hover() function，因为它可以避免所有类型的浏览器特定问题。

如果没有一点点测试，我会想象代码看起来更像是：

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });

Answer 2

您知道superfish吗？它是菜单jQuery插件，具有出色的跨浏览器支持。它肯定没有您遇到的问题。我没有检查源代码，但关键的区别是它增加了mouseout的延迟。这意味着除非光标的位置稳定一段时间（默认延迟为800毫秒），否则不会触发动作。这将解决您的问题，也是一个很好的实现，因为它将使您的菜单更加用户友好。

Answer 3

问题是，边框在框外“。如果您只需将下拉菜单向上移动1个像素，它就会与菜单栏重叠1个像素。

只需将CSS中下拉菜单的顶部位置从30px更改为29px即可：

        ul li ul {
            border: none;
            position: absolute;
            top: 29px; /* <-- was 30px */

Answer 4

它在我的Firefox 1.5.0.1版本上运行正常可能您没有最新版本。我自己运行一个图像库，但我不认为布局的类型对我来说非常好，因为我对我的图像有描述，而且一些图像非常大。我不知道，可能值得尝试。

如何修复这个JQuery下拉菜单？

4 个答案: