1

我能找到的所有答案都建议将 display:none 添加到 css ... 但是对于没有 javascript 的用户，他们永远不会看到该元素。

jQuery(document).ready(function($){

    $('#toggleElm').hide();

    $('#toggleBtn').click(function(){
        $('#shareLink').slideToggle();
    })

});

仍然会导致在页面加载期间出现和消失的元素，因为这些天页面在 DOM 完成之前开始呈现。

<script type='javascript'> 
    document.write("<style type='text/css'> #toggleElm {display:none} </style>");
</script>

在身体的顶部似乎太hacky了。

4

3 回答 3

1

为了防止 javascript FOUC 并让您的页面完全可访问，您应该.no-js在元素中应用一个类<html>，然后使用该类来设置元素的样式，就像 html5 样板+modernizr 一样

#toggleElm { display: none; }
.no-js #toggleElm { display: block; }

<head>当然，您必须尽快在文档中通过 javascript 删除该类，使用这样的脚本

<script>
    (function(d) { 
        d.className = d.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
    }(document.documentElement));
</script>

所以如果启用了javascript，它将把.no-js类变成.js类。

使用这种方法，即使 javascript 不可用，您的页面仍然可以访问，因为在这种情况下将应用最后一个 CSS 规则，使您的元素可见且可访问。

于 2012-04-03T15:07:43.743 回答
0

元素在解析结束标记后立即在 DOM 中注册。

因此，您可以在该选项卡之后直接隐藏元素；

<div id="toggleElm">Foo</div>
<script>
    // Note: No $(document).ready()!
    $('#toggleElm').hide();
</script>

显然，这取决于已经加载的 jQuery（即不包含在页面底部）。如果是这种情况，请恢复为普通的 JavaScript：

<div id="toggleElm">Foo</div>
<script>
    document.getElementById('toggleElm').style.display = 'none';
</script>
于 2012-04-03T14:53:22.507 回答
0

如果您不想等待文档准备好，请不要等待文档准备好。

<p id="foo">Stuff...</p>
<script>
    document.getElementById('foo').style.display = 'none';
</script>
于 2012-04-03T14:55:05.190 回答