Javascript jQuery脚本，可以在Chrome中使用，但不能在FireFox和Opera中使用

我写了一个脚本，在Chrome上非常有效，但在Opera和Firefox上却不起作用。我是JavaScript新手。提示可能有什么问题

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-50px");
    }, function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-38px");
    });

    $("#question_tab").click(function() {
        if ($("#question").css("left") == "100%") {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
        } else {
            $("#question").animate({
                marginLeft: "-38px",
                left: "100%"
            });
        }
    });
});

我认为问题在于检查-

if（$（“#问题”）.css（“左”）==“100%”

HTML、JS和CSS在此处：

---

滑动问题表单有问题。

调试是您在这里最好的朋友（因为您是JS新手，所以最简单的方法可能是使用alert（）或者设置断点或使用console.log（）更好）

**对于我知道alert（）不是首选的其他读者，我只是为那些不熟悉JS和调试的读者提供一些选项

---

例如，您会看到：

$（“#问题”）.css（“左”）

值在chrome中等于“100%”，但在firefox中，该值是以像素为单位定义的（例如837px）。因此，您的代码在其他浏览器中失败的原因是因为您的“IF”语句从未解析为true（匹配）。

调试将是您最好的朋友（因为您是JS新手，所以最简单的方法可能是使用alert（），或者最好设置断点或使用console.log（）

**对于我知道alert（）不是首选的其他读者，我只是为那些不熟悉JS和调试的读者提供一些选项

---

例如，您会看到：

$（“#问题”）.css（“左”）

值在chrome中等于“100%”，但在firefox中，该值是以像素为单位定义的（例如837px）。因此，您的代码在其他浏览器中失败的原因是因为您的“IF”语句从未解析为true（匹配）。

如果发现我的问题在这里得到解决：

我为隐藏窗体添加了“隐藏”类。工作代码：

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-47px");
    }, function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-36px");
    });

    $("#question_tab").click(function() {
        if ($("#question").hasClass("hidden")) {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
            $("#question").removeClass("hidden");
        } else {
            $("#question").animate({
                marginLeft: "-36px",
                left: "100%"
            });
            $("#question").addClass("hidden");
        }
    });
});

---

如果在此处找到问题的解决方法：

我为隐藏窗体添加了“隐藏”类。工作代码：

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-47px");
    }, function() {
        if ($("#question").hasClass("hidden"))
            $("#question").css("margin-left", "-36px");
    });

    $("#question_tab").click(function() {
        if ($("#question").hasClass("hidden")) {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
            $("#question").removeClass("hidden");
        } else {
            $("#question").animate({
                marginLeft: "-36px",
                left: "100%"
            });
            $("#question").addClass("hidden");
        }
    });
});

---

脚本的哪个部分在FF或Opera中不起作用？任何JS错误？尝试使用

$（document）.width（）

而不是

“100%”

，

（$（document）.width（）/2）

而不是“50%”你也可以发布你的html。如果没有它，很难复制问题。发布a将是最好的选择。脚本的哪部分在FF或Opera中不起作用？任何JS错误？尝试使用

$（document.width（）

而不是

“100%”

，

（$（document.width（）/2）

而不是“50%”你也可以发布你的html。如果没有它，很难复制问题。发布a将是最好的选择。也许更好的解决方案是使用类进行定位，然后你的jQuery逻辑可以简单地为你的点击/悬停事件交换类。例如：.qHoverOn.qHoverOff.qShow.qHide等。这样你只需指定y您希望您的项目定位在哪里，而不是尝试映射到100%或-38px等。没问题@arturtr，请将我的答案标记为已接受，因为它似乎对您有所帮助。它鼓励其他人将来也帮助您。也许更好的解决方案是使用类进行定位，然后您的jQuery逻辑可以简单地wap为您的点击/悬停事件导出类。例如：.qHoverOn.qHoverOff.qShow.qHide等。通过这种方式，您只需指定项目的位置，而不是尝试映射到100%或-38px等。没问题@arturtr，请将我的答案标记为已接受，因为它似乎对您有所帮助。它鼓励其他人在未来帮助您e也是。