Question

我有一个导航栏，当我覆盖一个元素时，显示下一个列表。但是当我的鼠标离开原始导航时，列表会消失。我希望列表在被覆盖时保持不变。你能帮忙吗？

Answer 1

从jQuery中删除第二个函数。它应该显示这个......

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

Answer 2

http://jsfiddle.net/daybreaker/fgtrR/

将ul.recToolbardrop放在li.drop内，以便li.drop封装它。

它徘徊是因为你在技术上不再在li.drop上空盘旋，因为你在它下方展示了一个全新的div。如果您将ul.recToolbardrop放在li.drop中，则当您将鼠标悬停在任何新的li.drop上时，您将不会离开li。

此外，对于记录，有几个纯CSS示例如何执行此操作，除非您专门尝试支持不识别所有CSS标记上的:hover的旧浏览器。

Answer 3

由于您的事件处理程序已附加到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>

Answer 4

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

无法使用jQuery切换滑动向下导航元素

4 个答案: