使用jQuery将内容加载到DIV中时出现问题

Question

我有一个div，默认情况下要隐藏它，然后单击按钮显示。 只要div未设置为style =“ display：none;”，我的代码就可以正常工作。 设置此设置后，DIV不会正确加载样式表。 我想我需要一些代码来在单击按钮时初始化页面加载。 这是我正在使用的jQuery：

jQuery(document).ready(function(){
    jQuery('#overlayHide').live('click', function(event) {        
         jQuery('#overlay').toggle('show');
    });
});

同样，只要我允许div在页面加载时加载，此代码就可以正常工作。 尝试设置display：none时，加载时CSS看起来混乱了。

这是我的代码：

<div id="overlay" style="display:none;"><iframe  id="contactIframe"  frameborder="0"  vspace="0"  hspace="0"  marginwidth="0"  marginheight="0" width="500"  height="500" scrolling="np"  height="400"  src="http://foobar.com/contact/demo.php">
</iframe></div>


jQuery(document).ready(function(){
    jQuery('#overlayHide').click(function(event) {        
         jQuery('#overlay').toggle('slow');
    });
});

只要我不设置display：hidden，它就可以正常工作，但是我需要在加载页面时将div隐藏。

Answer 1

这并不show它很slow ：

jQuery('#overlay').toggle('slow');

请阅读文档 。

编辑：
由于没有提供太多信息，并且iframe内使用的插件运行正常，因此我建议您使用类似左图的方法 ：

jQuery(document).ready(function(){
    jQuery('#overlayHide').live('click', function(event) {        
         jQuery('#overlay').toggleClass('hideMe');
         return false;
    });
});

Answer 2

我设法通过将iframe显示在单独的文件中，然后使用AXAJ将单独的文件加载到DIV中来解决此问题。