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");
});

Answer 2

没有人提及它但悬停伪事件接受输入/输出处理程序，因此您可以切换类：

$("#foo").hover(function () {
    $("#bar").toggleClass("hidden");
});

由于ID在文档上下文中必须是唯一的，因此无需传递上下文，只需使用ID作为目标元素。

Answer 3

而不是toggleClass()尝试使用addClass()和removeClass()：

$("#foo").hover(

    function() {

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

        $("#bar", this).removeClass("hidden");
});

这种方式可以让您更精确地控制元素。

jQuery .hover（）和页面加载

3 个答案: