Question

我在我的网站上使用这个奇特的小jQuery切换，效果很好。但是现在我想隐藏一些更大的文本区域，因此我将它包含在另一个php文件中，但是当网站打开\刷新时，内容会被简要显示然后隐藏？我做错了什么事，或者说它不能正确地使用包含在其中？

<a href="#" id="toggleMe">Show me?</a>
                <div class="content">
                    <?php include 'includes/test.php'?>
                     </div>
                     <script>
                         jQuery(document).ready(function() {
                         var par = jQuery('.content');
                            jQuery(par).hide();
                         });
                        jQuery('#toggleMe').click(function() { 
                        jQuery('.content').slideToggle('fast');
                     return false;
                     });
                     </script>

Answer 1

使用css隐藏

.content{
    display:none;
}

另外

var par = jQuery('.content');

是jQuery对象，因此不需要再次将其包装为

jQuery(par).hide();

只需使用par.hide();，但在这种情况下，当您使用css隐藏元素时，您就不再需要它了。

Answer 2

那将会发生。在准备好处理程序中执行代码之前，该文档会简要显示所有HTML。（它与PHP包含无关。）如果您想在页面加载时隐藏元素，请使用CSS将其隐藏。

#myElement {
    display: none;
}

切换仍然可以正常工作。

Answer 3

您只需要不使用jquery文件就绪功能。只需使用style属性。

  <a href="#" id="toggleMe">Show me?</a>

  <div class="content" style="display:none">
        <?php include 'includes/test.php'?>
  </div>
                     <script>
                         jQuery(document).ready(function() {

                            jQuery('#toggleMe').click(function() { 
                            jQuery('.content').slideToggle('fast');
                            return false;
                         });
                     </script>

Answer 4

如果此信息敏感/不应在未授予访问权限的情况下看到，则使用CSS隐藏它将无法解决您的问题。如果不是，你可以忽略所有这些，只使用带有display：none属性的CSS。

如果信息被隐藏：您只需按需加载文件本身。您可以使用AJAX请求数据，执行$（'。content'）。html（）或.append（）并使用类似JSON的内容将结果直接从服务器发送回浏览器。

Answer 5

您正在使用“就绪”功能，这意味着它将在文档准备好（完全加载）时隐藏元素。你可以使用css隐藏它：

.contnet { display: none; }

Answer 6

如何渲染你的站点服务器端并不影响网站在浏览器上的加载方式，影响它的是特定浏览器如何选择加载你的javascript和html，我建议将元素设置为隐藏与css因为这是在其他任何事情之前应用的。并保持代码原样，因为切换将继续工作

Answer 7

您也可以稍微清理一下代码。

   <script>
     $(document).ready(function(){
        $('.content').hide(); 
        $('#toggleMe').click(function(){ 
            $('.content').slideToggle('fast');
        });
     });
    </script>

jQuery在刷新时显示隐藏的内容

7 个答案: