【问题标题】：Simple Jquery Drop-down Menu repeats animation, how can I stop this?简单的 Jquery 下拉菜单重复动画，我该如何停止呢？
【发布时间】：2023-03-17 16:19:01
【问题描述】：

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

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>

【问题讨论】：

我的问题是整篇文章的主题。不过谢谢。

标签： jquery animation drop-down-menu repeat

【解决方案1】：

不要使用$('.dropdown').hover() 事件，而是尝试mouseenter 和mouseexit，如下所示：

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

和

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

编辑

类似fiddle - Yfm5D

【讨论】：

这可行但不是必需的。一旦她定义了 .hover() 方法的第二个函数，悬停就可以正常工作。
:/ 在我的网站上这也不起作用 sigh。我有一个“main-js.js”文件，我在其中添加了所有 jquery。我应该将菜单脚本与其他脚本分开吗？或者这不是问题？
@user1758020 您是否检查了给出的小提琴链接上的整个代码？
是的，我去了小提琴并复制了新的*代码。没用：/

【解决方案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();

        }

    });
});

【讨论】：

@user1758020 大声笑给我一个小提琴，上面有你的完整代码，我会帮你的！ :)
您只想要菜单代码还是包含我所有的 jquery 脚本的完整文件？
@user1758020 jsfiddle.net/9cZBN 在这里工作 - 我希望你的代码中包含 JQ 源代码:)
@keihead 我的意思是，:) 或发给我的 url 我会看看，但这里是 JQ 源 <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.8.2/jquery.min.js"></script> 在你的代码中添加这一行。
嘿@keihead Sup，进展如何！嘿，这里很好，或者我可以在这里为你开始聊天，如果你在 SO 在线，我知道你现在还有什么问题？ :)另外我看不到你的粘贴箱，干杯！

【解决方案3】：

Like this

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

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

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

【讨论】：

我试过了，但动画仍在继续。如果您将鼠标悬停超过 3 次，当光标甚至不在链接上时，动画会继续运行……有没有解决方案？ @computerarts
这个 sn-p 不会禁用菜单。但是，它仍然会做一个时髦的重复动画。