Firefox 在使用 jquery hide() 时不隐藏 div答案

【问题标题】：Firefox doesn't hide dive when using jquery hide()Firefox 在使用 jquery hide() 时不隐藏 div
【发布时间】：2013-02-28 15:06:01
【问题描述】：

所以我试图让 Firefox 在页面加载时隐藏一个 div，但没有取得多大成功。它可以在 Chrome 和 IE 中运行。我的 HTML 看起来像这样

<div id="container">
  <iframe src="www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

我的 Javascript 看起来像这样

$(document).ready(function () {
  $("#container").dialog({ autoOpen: false, Title: "Hello, World!" });
  $("#container").hide(0);

  $("#showBtn").bind("click", function () {
    $("#container").dialog("open");
  });
});

这就是我想要做的。在页面加载时，#container 将被隐藏并一直保持，直到用户单击“显示”按钮。

【问题讨论】：

你试过用 hide();没有参数？
@EnterJQ 是的，我做到了。
将 .bind 替换为 .on
哦，实际上，没有参数的 hide() 可以神奇地工作！谢谢！

标签： javascript jquery firefox dialog show-hide

【解决方案1】：

<div id="container">
    <iframe src="http://www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

jquery 代码

$('#showBtn').click(function () 
{

  $("#container").css("display","");

});

window.load=$("#container").css("display","none");

【讨论】：

【解决方案2】：

这在 Mac OS X 上的 Firefox 19.0 中运行良好（就像在 Chrome 中一样）。您的问题可能与您尝试放入 iframe 的内容有关。它不适用于 Google。

Functioning jsfiddle（代码相同，包含在 StackOverflow 中）：

$(document).ready(function () {
  $("#container").dialog({ autoOpen: false, Title: "Hello, World!" });
  $("#container").hide(0);

  $("#showBtn").bind("click", function () {
    $("#container").dialog("open");
  });
});

Google 无法在 iframe 中工作的原因：How to show google.com in an iframe?。

如果hide 的0 参数无效，您可能会发现某些版本的jQuery 在某些浏览器上将无法工作。

【讨论】：

【解决方案3】：

正如@EnterJQ 指出的，没有参数的 hide() 解决了这个问题！

【讨论】：

【解决方案4】：

您无法将 google 加载到 iframe 中。见：here

【讨论】：

【解决方案5】：

这样做

<div id="container" class="display-none">
  <iframe src="www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

css

.display-none{
display:none;
}

最初您的 div 会被隐藏，当用户单击显示按钮时，只需切换类。

$("#container").toggleClass('display-none');

希望这会有所帮助。

【讨论】：