我能找到的所有答案都建议在css中添加display:none。。。但是对于没有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>
在身体的顶部似乎太暴躁了。
为了防止javascript FOUC并让您的页面完全可访问，您应该在<html>元素中应用一个.no-js类，然后使用该类为元素设置样式，与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规则，使您的元素可见且可访问。
元素的结束标记一经解析，就会在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>
如果您不想等待文档准备就绪，请不要等待文档准备好
<p id="foo">Stuff...</p>
<script>
document.getElementById('foo').style.display = 'none';
</script>