javascript - 闪烁的 CSS 和 Javascript 下拉列表

Question

这是我的菜单的 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 中的某些内容。

Answer 1

这是一个 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();
    }
);

或者，如果您 super 喜欢冒险您只需使用 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;
}