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

Question

下面的代码工作得很好，除了一个条件。如果用户在文档准备好之前将鼠标悬停在元素上，则 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

Answer 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