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();
    }
);

或者，如果你超级喜欢冒险，你可以只用 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;
}

Answer 2

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

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

Answer 3

工作 jsFiddle 演示

在and之前使用.stop()方法：.slideUp().slideDown()

$('.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 文档

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

Answer 4

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

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