jquery - 简单的 Jquery 下拉菜单重复动画，我该如何停止呢？

Question

尝试多次滚动悬停在链接上，这就是触发重复动画的原因。

查询//

    // Wait for the page and all the DOM to be fully loaded
$('body').ready(function() {

            // Add the 'hover' event listener to our drop down class
    $('.dropdown').hover(function() {
                    // When the event is triggered, grab the current element 'this' and
                    // find it's children '.sub_navigation' and display/hide them
        $(this).find('.sub_navigation').slideToggle(); 
    });
});

HTML//

    <ul id="navigation">
<li class="dropdown"><a href="#">Dropdown</a>
    <ul class="sub_navigation">
        <li><a href="#">Sub Navigation 1</a></li>
        <li><a href="#">Sub Navigation 2</a></li>
        <li><a href="#">Sub Navigation 3</a></li>
    </ul>
</li>
<li class="dropdown"><a href="#">Dropdown 2</a>
    <ul class="sub_navigation">
        <li><a href="#">Sub Navigation 1</a></li>
        <li><a href="#">Sub Navigation 2</a></li>
        <li><a href="#">Sub Navigation 3</a></li>
    </ul>
</li>

Answer 1

而不是有$('.dropdown').hover()事件，尝试mouseenter和mouseexit这样的：

('.dropdown').on('mouseeneter', function() {

和

('.dropdown').on('mouseexit', function() {

编辑

像这样的小提琴- Yfm5D

Answer 2

你可以在这里做一些简单的事情：http: //jsfiddle.net/gJmQh/

is(":visible")查看。

$(this).find('.sub_navigation').is(":visible")

希望它适合你的事业:)

代码

// Wait for the page and all the DOM to be fully loaded
$('body').ready(function() {

    // Add the 'hover' event listener to our drop down class
    $('.dropdown').hover(function() {
        // When the event is triggered, grab the current element 'this' and 
        if ($(this).find('.sub_navigation').is(":visible")) {
            // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideUp();
        } else {
            $(this).find('.sub_navigation').slideDown();

        }

    });
});​

Answer 3

像这样

您需要定义两个功能.hover()才能工作（悬停/悬停）。

$(document).ready(function() {
    $('.dropdown').hover(function() {

        $(this).find('.sub_navigation').slideDown();
    }, function() {
        $(this).find('.sub_navigation').slideUp();
    });
});