闪烁的CSS和Javascript下拉列表

Flickering CSS and Javascript dropdown

本文关键字：Javascript 下拉列表 CSS 闪烁      更新时间：2023-09-26

这是我的菜单的HTML：

<div class="navLink four">
    <div>
        <a href="this.php">this</a>
        <div class="subMenu">
            <a href="link.php">link</a>
            <a href="link.php">link</a>
        </div>
    </div>
</div>

我有这个jQuery来显示和隐藏我的菜单：

$('.navLink div').hover(
  function () {
    $('.navLink div .subMenu').css({'display': 'none'});
    $(this).find('.subMenu:first').slideDown();
  },
  function () {
    $('.navLink div .subMenu').css({'display': 'block'});
    $(this).find('.subMenu:first').slideUp();
  }
);

这个CSS：

.navLink .subMenu {
    display: none;
    position: absolute;
}
.navLink > div:hover .subMenu {
    display: block;
}

但是当你把鼠标悬停在它上面时，下拉列表会弹出很多，我想我需要一些preventDefault((或javascript中的东西。

这里有一个JSfiddle来展示这个问题：http://jsfiddle.net/V5H3A/

以下是解决方案：http://jsfiddle.net/jdfqW/1/

你需要像这样停止动画：

$('.navLink div').hover(
    function () {
        $('.navLink div .subMenu').css({'display': 'none'});
        $(this).find('.subMenu:first').stop().slideDown();
    },
    function () {
        $('.navLink div .subMenu').css({'display': 'block'});
        $(this).find('.subMenu:first').stop().slideUp();
    }
);

对于更少的代码行，您可以执行以下操作http://jsfiddle.net/jdfqW/2/:

CSS：

.navLink .subMenu {
    display: none;
    position: absolute;
}

Javascript：

$('.navLink div').hover(
    function () {
        $(this).find('.subMenu:first').stop().slideToggle();
    }
);

或者，如果你非常喜欢冒险，你只需CSS3就可以完成这一切http://jsfiddle.net/jdfqW/3/:

CSS

.navLink .subMenu {
    height: 0px;
    overflow: hidden;
    position: absolute;
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
    transition:height 0.5s ease
}
.navLink:hover .subMenu {
    height: 20px;
}

$('.navLink div a:first').mouseenter(function () {
    $(this).next('.subMenu').slideDown(200);
}).mouseleave(function () {
    $(this).next('.subMenu').slideUp(200);
});

没有任何闪烁的--->http://jsfiddle.net/WK7We/

使用stop()。。。这将停止正在运行的动画，我认为这会导致闪烁。。。

$(this).find('.subMenu:first').stop().slideDown();
$(this).find('.subMenu:first').stop().slideUp();

工作jsFiddle演示

在.slideUp()和.slideDown():之前使用.stop()方法

$('.navLink div').hover(
    function () {
        $('.navLink div .subMenu').css({'display': 'none'});
        $(this).find('.subMenu:first').stop().slideDown();
        // HERE --------------------- ^
    },
    function () {
        $('.navLink div .subMenu').css({'display': 'block'});
        $(this).find('.subMenu:first').stop().slideUp();
        // HERE --------------------- ^
    }
);

参考文献：

  • .stop()-jQuery API文档

    停止匹配元素上当前正在运行的动画

相关文章：