简单的Jquery下拉菜单重复动画，我该如何阻止它？

Question

尝试滚动悬停在链接上多次触发重复动画。

JQUERY //

    // 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() {

修改

像这样fiddle - 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

Like this

您需要为.hover()定义两个函数才能正常工作（悬停/悬停）。

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

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