dony39517
2013-09-14 20:43
浏览 148
已采纳

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

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>

图片转代码服务由CSDN问答提供 功能建议

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

 &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; 
   
  
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • dongyan1974 2013-09-14 20:49
    已采纳

    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.

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanpu2272 2013-09-14 20:46

    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.

    评论
    解决 无用
    打赏 举报
  • duanjiao6711 2013-09-14 20:47

    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>
    
    评论
    解决 无用
    打赏 举报
  • dsklzerpx64815631 2013-09-14 20:47

    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; }
    
    评论
    解决 无用
    打赏 举报
  • dsigh7478 2013-09-14 20:48

    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

    评论
    解决 无用
    打赏 举报
  • douxi0098 2013-09-14 20:59

    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.

    评论
    解决 无用
    打赏 举报
  • duanpen9294 2013-09-26 02:48

    You can also clean up the code a little bit.

       <script>
         $(document).ready(function(){
            $('.content').hide(); 
            $('#toggleMe').click(function(){ 
                $('.content').slideToggle('fast');
            });
         });
        </script>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题