jquery中的下拉子菜单有问题

我使用jquery创建下拉子菜单，但是当我将鼠标悬停在任何主导航链接上时，所有子菜单都会下拉。我相信我需要用

this（）

做点什么，但我似乎没有正确的语法。这是一把小提琴

这是我的HTML

<nav id="nav">
    <ul class="nav">
        <li class="mainli"><a href="" class="selected">Home</a>
            <ul class="submenu">
                <li>s1111111</li>
                <li>a2222222</li>
                <li>g3333333</li>
                <li>y4444444</li>
            </ul>
        </li>    
        <li class="mainli"><a href="album.html">My Photos</a>
            <ul class="submenu">
                <li>11111111</li>
                <li>22222222</li>
                <li>33333333</li>
                <li>44444444</li>
            </ul>
        </li>
        <li class="mainli"><a href="travel.html">My Travel</a>
            <ul class="submenu">
                <li>aaaaaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>cccccccccc</li>
                <li>dddddddddd</li>
            </ul>
        </li>
        <li class="mainli"><a href="aboutwork.html">About Work</a>
            <ul class="submenu">
                <li>rgre1111</li>
                <li>estg22</li>
                <li>thser3333</li>
                <li>rtyr4444</li>
            </ul>
        </li>
        <li class="mainli"><a href="portfolio.html">My Portfolio</a>
            <ul class="submenu">
                <li>qqqqqqqq</li>
                <li>tttttttt</li>
                <li>ppppppppp</li>
                <li>yyyyyyyyyy</li>
            </ul>
        </li>
        <li class="mainli"><a href="contact.html">Contact Me</a>
            <ul class="submenu">
                <li>99999999</li>
                <li>88888888</li>
                <li>77777777</li>
                <li>66666666</li>
            </ul>
        </li>
    </ul>
</nav>  

使用该方法，并将您的

。子菜单设置为
显示：无
，以便首先将其隐藏：

$(document).ready(function() {
  $(".mainli").hover(function() {
    $(this).find(".submenu").slideDown("medium");
  },
  function() {
    $(this).find(".submenu").slideUp("medium");
  }
  );
});

请参阅。
可能有更好的方法可以做到这一点，但只要对代码进行最小的更改，以下方法就可以了：

$(document).ready(function(){
    $('.submenu').slideUp();
    $(".mainli").hover(function() {
        $(this).children('.submenu').slideDown("medium");
    },
    function () {
        $(this).children('.submenu').slideUp("medium");
    });
});

您需要在
$（此）
中搜索
子菜单
，方法
find（）
将为您执行此操作
children（）
也适用于您的情况，只要
。子菜单
是
this（）
的直接子菜单<另一方面，代码>查找（）
在所有子代（即子代、孙辈等）中搜索

根据统计，这两种功能在速度上没有太大的差别

$(document).ready(function () {
    // $(".submenu").slideUp("medium");
    $(".mainli").hover(function () {
        $(this).find(".submenu").slideDown("medium");
    },

    function () {
        $(this).find(".submenu").slideUp("medium");
    });
});

我在你的小提琴上试过了，效果很好，你可能想取消注释那行
$（“.submenu”）.slideUp（“medium”）以便所有菜单开始关闭。

$（“.submenu”，this）

那应该对你有用。另外，在CSS中，您需要有
.子菜单{display:none；}
我会在默认情况下隐藏子菜单，然后检查它们是否在悬停时隐藏，如果隐藏，则向下滑动，否则只需使用hide

看这个

更新了JS

$(document).ready(function () {
    $(".mainli").hover(function () {
        var target = $(this).find('.submenu');
        if (target.is(':hidden')) {
            target.slideDown("medium");
        } else {
            target.hide();
        }
    });
});

添加CSS

ul.submenu {
    float: right;
    display:none;
    overflow:hidden;
}

通过解除警报，它们应该被扩展？您可能可以在这里逃脱
这个
`$（本节）。向下滑动（“中等”）；你知道哈弗死了吗？您的任何移动用户都不能使用此菜单。@cpburnz感谢您整理我的代码，但这对我没有帮助。：）@Rahil Wazir当我悬停在一个上面时，在这种情况下，一个应该是
find
优先于
children
？我在回答中说了
children
，但是
find
可能更有效，或者更好地处理某些情况。我认为用JS这样隐藏
子菜单
并不理想。加载页面时，可能会导致可见菜单闪烁。谢谢。如果你添加了一个提琴，它将永远是更受欢迎的。你的评论包含不同的语法比你的答案阅读以上：）同意。我用这些评论让OP开始思考。我用答案来解决问题。我回复了你的评论：（哦？请看下面）。再问一个问题。由于我在菜单下面有内容，我如何让内容忽略掉掉掉在菜单上的子菜单？
ul.submenu {
    float: right;
    display:none;
    overflow:hidden;
}