使用jQuery切换向下滑动导航元素时遇到问题

我有一个导航条，当我越过一个元素时，下一个列表就会显示出来。但是当我的鼠标离开原始导航时，列表就会出现。我希望这份单子在吃得过多时留下来。你能帮忙吗

---

将mouseleave事件添加到div.recToolbardrop而不是li。drop

将mouseleave事件添加到div.recToolbardrop而不是li。drop

只需从jQuery中删除第二个函数即可。它应该表明这一点

$(document).ready(function () {
    $('li.drop').mouseenter(function () {
        $('div.recToolbardrop').slideDown('fast');
    });
});

---

只需从jQuery中删除第二个函数。它应该表明这一点

$(document).ready(function () {
    $('li.drop').mouseenter(function () {
        $('div.recToolbardrop').slideDown('fast');
    });
});

将

ul.recToolbardrop

放入

li.drop

中，以便

li.drop

封装它

它向上悬停是因为从技术上讲，您不再将鼠标悬停在

li.上。拖放
，因为您正在它下面显示一个全新的div。如果将
ul.recToolbardrop
放入
li.drop
中，当您将鼠标移到任何新的
li
上时，您将不会离开
li.drop

另外，为了记录在案，有几个纯CSS的例子说明了如何做到这一点，除非您特别尝试支持不识别
：在所有CSS标记上悬停
。

将
ul.recToolbardrop
放入
li.drop
中，以便
li.drop
封装它

它向上悬停是因为从技术上讲，您不再将鼠标悬停在
li.上。拖放
，因为您正在它下面显示一个全新的div。如果将
ul.recToolbardrop
放入
li.drop
中，当您将鼠标移到任何新的
li
上时，您将不会离开
li.drop

另外，为了记录，这里有几个纯CSS的例子来说明如何做到这一点，除非你特别想支持不识别
：在所有CSS标签上悬停
。
因为你的事件处理程序附加到你的
li.drop
元素，你需要像这样将你的子菜单封装在该元素中

<li class="drop">
    <a href="#">Recruiter Tools</a>
    <div class="recToolbardrop" style="display:none;">
        <ul class="recToolbardrop">
            <li><a href="#">Featured Tools</a></li>
            <li><a href="#">All Tools</a></li>
        </ul>
    </div>
</li>







因为您的事件处理程序连接到您的
li.drop
元素，所以您需要将您的子菜单封装在该元素中，如下所示

<li class="drop">
    <a href="#">Recruiter Tools</a>
    <div class="recToolbardrop" style="display:none;">
        <ul class="recToolbardrop">
            <li><a href="#">Featured Tools</a></li>
            <li><a href="#">All Tools</a></li>
        </ul>
    </div>
</li>







你希望它停留多长时间？你希望它停留多长时间？“我希望列表在悬停时停留”似乎暗示他希望它在不悬停时再次消失。“我希望列表在悬停时停留”似乎暗示他希望它在不悬停时再次消失。