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

Working jsFiddle Demo

在.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();

闪烁的CSS和Javascript下拉列表

4 个答案: