1

我在我的网站上使用了这个花哨的小 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>
4

7 回答 7

4

用来css隐藏它

.content{
    display:none;
}

还

var par = jQuery('.content');

是一个jQuery对象，所以不需要再次包装它

jQuery(par).hide();

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

于 2013-09-14T20:49:19.613 回答
2

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

#myElement {
    display: none;
}

切换开关仍应正常工作。

于 2013-09-14T20:46:31.253 回答
1

您只需要不使用 jquery 文档就绪功能。只需使用样式属性。

  <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>
于 2013-09-14T20:47:35.060 回答
1

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

如果应该隐藏信息：您只需要按需加载文件本身。您将使用 AJAX 请求数据，执行 $('.content').html() 或 .append() 并使用 JSON 之类的方式将结果直接从服务器发送回浏览器。

于 2013-09-14T20:59:05.330 回答
0

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

.contnet { display: none; }
于 2013-09-14T20:47:51.637 回答
0

您如何呈现站点服务器端不会影响站点在浏览器上的加载方式，影响它的是特定浏览器如何选择加载您的 javascript 和 html，我建议使用 css 将元素设置为隐藏，因为在其他任何事情之前应用。并保持您的代码不变，因为切换无论如何都会起作用

于 2013-09-14T20:48:17.483 回答
0

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

   <script>
     $(document).ready(function(){
        $('.content').hide(); 
        $('#toggleMe').click(function(){ 
            $('.content').slideToggle('fast');
        });
     });
    </script>
于 2013-09-26T02:48:40.453 回答