javascript - jQuery .hover() 和页面加载

Question

我有以下 div:

<div id="foo">
...
    <div id="bar" class="container hidden">
    ...
    </div>
</div>

我使用 Twitter Bootstrap 3，我添加了隐藏类以默认自动隐藏第二个 div。

我有以下代码:

$(document).ready(function() {
    $("#foo").hover(
        function() {
            $("#bar", this).toggleClass("hidden");
        }, function() {
            $("#bar", this).toggleClass("hidden");
    });
});

它似乎工作正常但是如果鼠标在页面加载期间已经悬停在#foo div 上，它默认应用悬停效果。之后，如果我将鼠标移到 #foo div 之外，它会再次应用 toggleClass 并显示内部 #bar div。

如何在页面加载时防止这种行为？

Answer 1

正确的做法是:

$("#foo").hover(
    function() {
        $("#bar", this).addClass("hidden");
    }, function() {
        $("#bar", this).removeClass("hidden");
});