Question

我使用简单的jQuery代码进行下拉导航，但它没有给出预期的结果......

jquery代码

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).slideDown(100);
        }, function () {
            $('ul', this).slideUp(100);     
        });
});

html代码

<ul class="nav radius clearfix">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Projects</a>
        <ul class="radius">
            <li><a href="#">Recent Projects</a></li>
            <li><a href="#">Archive Projects</a></li>
            <li><a href="#">New Project</a></li>
        </ul>
     </li>
     <li><a href="#">Messages</a></li>
</ul>

请检查并告诉我我错过了什么。感谢。

Answer 1

编辑：除了在关闭状态下启动之外，为了解决动画“闪烁问题”，您可以使用以下内容（在jsfiddle here上查看）。这不是很优雅，但这个问题源于一些浏览器处理所涉及元素大小变化的方式，这确实解决了这个问题：

$(function() {
    $('.nav li').hover(function () {

        $('ul:not(:animated)', this).slideDown(100);
        }, function () {
            $('ul:not(:animated)', this).slideUp(100);     
        });
    $('.nav li ul').slideUp(0);
});

Answer 2

试试这个 - 它会增加延迟以保持您有时会遇到的“闪烁”。

$(function() {
    $('.nav li').hover(function () {
            $('ul', this).delay(50).stop().slideDown(100);
        }, function () {
            $('ul', this).delay(50).stop().slideUp(100);     
        });
});

jQuery下拉导航

2 个答案: