jQuery下拉导航 [英] jQuery dropdown navigation

问题描述

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

I am using simple jQuery code to make drop down navigation, but its not giving expected results...

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>

请检查并让我知道我在想什么.谢谢.

Please check and let me know what's I am missing. thanks.

推荐答案

除了在关闭状态下开始播放动画闪烁问题"外，您还可以使用以下内容(在jsfiddle上进行检查此处).它不是很优雅，但是这个问题是由某些浏览器处理所涉及元素的大小变化的方式引起的，并且确实可以解决以下问题:

to address the animation "flickering issue" in addition to starting in a closed state, you can use the following (check it on jsfiddle here). It's not very elegant but this issue arises from the way some browsers handle the change in size of the elements involved, and this does resolve that:

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

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

这篇关于jQuery下拉导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！