jquery - シンプルな 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() {

編集

このフィドルのようなもの-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

このような

を機能させるには、2 つの関数を定義する必要があります.hover()(ホバーイン / ホバーアウト)。

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

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