如果用户在文档准备好之前悬停，jQuery .hover 会导致问题

Posted 2023-05-08

【中文标题】如果用户在文档准备好之前悬停，jQuery .hover 会导致问题

【英文标题】：jQuery .hover causing problems if user is hovering before doc ready

【发布时间】：2011-06-23 20:27:05

【问题描述】：

除了一个条件之外，下面的代码效果很好。如果用户在文档准备好之前将鼠标悬停在元素上，则 slideToggle 将不同步（或反转）。

所以结果是 #logged_in_nav 在鼠标悬停时显示，而在悬停时该框消失。有什么简单的方法可以解决这个问题？

   $("#logged_in_box").hover(function()
            $("#logged_in_nav").stop(true, true).slideToggle("fast");
            $(this).addClass("logged_in_box_hover");
        , // hover over
        function() 
            $("#logged_in_nav").stop(true, true).slideToggle("fast");
            $(this).removeClass("logged_in_box_hover");
         // hover out
    ); // hover

【参考方案1】：

不要使用slideToggle。请改用slideDown()^(docs) 和slideUp()^(docs)，以便将方向明确绑定到事件类型。

$("#logged_in_box").hover(function()
        $("#logged_in_nav").stop(true, true).slideDown("fast");
        $(this).addClass("logged_in_box_hover");
    , // hover over
    function() 
        $("#logged_in_nav").stop(true, true).slideUp("fast");
        $(this).removeClass("logged_in_box_hover");
     // hover out
); // hover