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

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

 &lt; a href =“#”id =“toggleMe”&gt;显示我?&lt;  ; / a&gt; 
&lt; div class =“content”&gt;
&lt;?php include'include / test.php'?&gt;
&lt; / div&gt;
&lt; script&gt;
jQuery( 文件).ready(function(){
var par = jQuery('。content');
jQuery(par).hide();
});
jQuery('#toggleMe')。click( function(){
jQuery('。content')。slideToggle('fast');
return false;
});
&lt; / script&gt;
</ code> </ pre>
</ DIV>

展开原文

原文

I use this fancy little jQuery toggle on my site, works great. But now I have a little larger text area I want to hide, and therefore I've included it in another php file, but when the site opensefreshes the content is briefly shown and then hidden? Have I done something wrong or does it simply not work right with includes in it ?

<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>

dongyi4170
dongyi4170 好吧,看起来我错了。但是在这里仍然没有必要,因为在解析之后该元素应该可用于脚本。
大约 7 年之前 回复
dowm41315
dowm41315 你知道jQuery(document).ready的用途是什么?它等待直到DOM,但不是所有外部资源都已完成加载。
大约 7 年之前 回复
duanjingsen7904
duanjingsen7904 -这不是准备好的文件。它不会等待加载图像等外部资源,这就是onload事件的作用。文档就绪等待直到DOM准备就绪,即整个文档已被解析。
大约 7 年之前 回复
dourao1896
dourao1896 你知道jQuery(document).ready的用途是什么?它等待整个文档(包括所有外部资源)完成加载。但是因为你将脚本元素嵌入到它应该工作的元素之后,你不需要它-只需jQuery('.content')。hide()会做(假设已经加载了jQuery)。
大约 7 年之前 回复
doudiecai1572
doudiecai1572 使用CSS。。内容{显示:无}
大约 7 年之前 回复
drgzmmy6379
drgzmmy6379 不确定你问的是什么,但是在你的文档就绪处理程序中,你不需要par变量,只需要jQuery('。content')。hide();.(或者par.hide();不要再将par传递给jQuery()函数。)另外,如果你的脚本位于它操作的元素之后,你就不需要准备好文档了。
大约 7 年之前 回复

7个回答



使用 css </ code>隐藏它</ p>

  .content  {
display:none;
}
</ code> </ pre>

此外</ p>

  var par = jQuery('。content  '); 
</ code> </ pre>

是一个 jQuery </ code>对象,因此不需要再次将其包装为</ p>

< pre> jQuery(par).hide();
</ code> </ pre>

只需使用 par.hide(); </ code>但在这种情况下 ,当你使用 css </ code>隐藏元素时,你不再需要它了。</ p>
</ div>

展开原文

原文

Use css to hide it

.content{
    display:none;
}

Also

var par = jQuery('.content');

is a jQuery object so don't need to wrap it again as

jQuery(par).hide();

Just use par.hide(); but in this case, when you will use css to hide the element, then you don't need this anymore.

duanchu7271
duanchu7271 很高兴知道那件事 :-)
大约 7 年之前 回复
doufu8887
doufu8887 jQuery的简单解释,简单的解决方案! 使用css {display:none}修复它 - 我只是过分复杂整个jQuery的事情。
大约 7 年之前 回复



这将会发生。 在准备好处理程序中执行代码之前,该文档会简要显示所有HTML。 (它与PHP包含无关。)如果你想在页面加载时隐藏一个元素,请使用CSS隐藏它。</ p>

  #myElement {
display:none ;
}
</ code> </ pre>

切换应该仍能正常工作。</ p>
</ div>

展开原文

原文

That will happen. The document briefly shows all the HTML before executing the code in your ready handler. (It has nothing to do with the PHP include.) If you want an element hidden when the page loads, hide it using CSS.

#myElement {
    display: none;
}

The toggle should still work correctly.



您只需要不使用jquery文档就绪函数。 只使用样式属性。</ p>

 &lt; a href =“#”id =“toggleMe”&gt; Show me?&lt; / a&gt; 

&lt; div class =“content”style =“display:none”&gt;
&lt;?php include'include / test.php'?&gt;
&lt; / div&gt;
&lt; script&gt;
jQuery(document)。 ready(function(){

jQuery('#toggleMe')。click(function(){
jQuery('。content')。slideToggle('fast');
return false;
}) ;
&lt; / script&gt;
</ code> </ pre>
</ div>

展开原文

原文

You just need to don't use jquery document ready function. just use style attribute.

  <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>



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

如果信息应该被隐藏:
你只需要加载文件本身 一经请求。 您可以使用AJAX请求数据,执行$('。content')。html()或.append()并使用类似JSON的内容将结果直接从服务器发送回浏览器。</ p>
< / DIV>

展开原文

原文

If this information is sensitive/not supposed to be seen without access granted, hiding it with CSS will not fix your problem. If it's not, you can ignore all of this and just use CSS with a display: none property.

If the information IS supposed to be hidden: You need to only load the file itself on-demand. You would request the data with AJAX, do a $('.content').html() or .append() and send the result back directly from the server to the browser using something like JSON.



您正在使用“就绪”功能,这意味着它将在文档准备好(完全加载)时隐藏元素。
您可以 使用css隐藏它:</ p>

  .contnet {display:none;  } 
</ code> </ pre>
</ div>

展开原文

原文

You are using the "ready" function that meant it will hide the element when the document is ready (fully loaded). You can hide it using css:

.contnet { display: none; }



如何渲染站点服务器端不会影响站点在浏览器上的加载方式,影响它的是特定浏览器选择的方式 加载你的JavaScript和HTML,我建议将元素设置为隐藏与css,因为这是在其他任何事情之前应用。 并保持代码不变,因为切换仍然可以正常工作</ p>
</ div>

展开原文

原文

how you render you site server side does not affect how the site is loaded on the browser, what affects it is how the specific browser chooses to load your javascript and html, what i would recommend is set the element to hidden with css, since that is applied before anything else. And keep you code as is, since the toggle will work anyways



您也可以稍微清理一下代码。 </ p>

 &lt; script&gt; 
$(document).ready(function(){
$('。content')。hide();
$(' #toggleMe')。click(function(){
$('。content')。slideToggle('fast');
});
});
&lt; / script&gt;
</ code > </ pre>
</ div>

展开原文

原文

You can also clean up the code a little bit.

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问