如何使用jQuery隐藏元素，然后呈现？
我想要生成可以有条件显示/隐藏的区域（div，span）的html布局。 这些区域默认是隐藏的。
如果我在document.ready上使用jquery调用.hide（）方法，这些区域可能会闪烁（浏览器渲染部分加载的文档）。 所以我在html布局中应用“display：none”样式。
我不知道什么是最好的做法，以避免眨眼，因为应用“显示：无”打破封装规则 – 我知道什么jQuery隐藏/显示和使用它。 如果jQuery的隐藏/显示的实现将改变一天，我会让整个网站无法工作。
先谢谢你
设置元素的初始显示属性绝对没有错，特别是如果你把它封装在一个css类中。
@安德鲁，
我知道答案已被接受，但使用display: none; 对于没有Javascript的用户来说将是一场噩梦。
使用内嵌Javascript，你可以隐藏一个元素，而不会闪烁。 没有Javascript的用户仍然可以看到它。
考虑一些在页面加载时应该隐藏的div。
<head> <script type="text/javascript" src="jQuery.js"></script> </head> <body> <div id="hide-me"> ... some content ... </div> <script type="text/javascript"> $("#hide-me").hide(); </script> <div id="hide-me-too"> ... some content ... </div> <script type="text/javascript"> $("#hide-me-too").hide(); </script> </body>
内嵌的Javascript将在元素呈现后立即运行，从而将其隐藏起来。
我同意BorisGuéry的观点，认为这不是过度工程，而是标准的最佳实践。 我会采取与Boris稍有不同的方式，通过在html中添加一个no-js类，然后用JavaScript删除它。
这样你就不会等待文档准备好隐藏内容，没有任何JavaScript，你仍然可以看到内容。 假设用户没有JavaScript更符合渐进式增强的哲学。
例如：
<html class="no-js"> <body> <div id="foo"></div> </body> </html>
我的CSS：
#foo { display: none; } html.no-js #foo { display: block; }
和JavaScript
$(document).ready( function() { $('html').removeClass('no-js'); } );
*********或按个案计算***********
例如：
<div class="no-js" id="foo">foobar and stuff</div>
CSS：
.no-js { display:none; } #foo { display: block; } #foo.no-js { display: none; }
JS：
$(document).ready(function(){ // remove the class from any element that has it. $('.no-js').removeClass('no-js'); });
我也在努力，特别是在IE中，我发现这非常有帮助： http : //robertnyman.com/2008/05/13/how-to-hide-and-show-initial-content-depending-on-shather -javascript支持，是可用/
我通常为我的元素设置一个.js类，以便在启用javascript时设置适当的属性。
然后，我可以设置CSS取决于如果JavaScript存在或不。
例如：
<html class="js"> <body> <div id="foo"></div> </body> </html>
我的CSS：
html.js #foo { display: none; }
和JavaScript
$(document).ready( function() { $(html).addClass('js'); } );
为什么不这样做呢？
// Hide HTML element ASAP $('html').hide(); // DOM-ready function $(function () { // Do stuff with the DOM, if needed // ... // Show HTML element $('html').show(); }
它似乎工作正常！
问候。
你可以在CSS类中应用“display：none”。
因为浏览器必须读取一些HTML代码才能find元素的顺序。 浏览器读取HTML时，必须将元素标记为隐藏。
您还可以将HTML插入JavaScript中，并且可以在呈现之前调用hide。
我总是使用Modernizr.js http://modernizr.com/来处理这个。;
在Mondernizr中，类“js”或“no-js”被添加到页面的HTML标记中。
从这里你可以隐藏你的元素只有当html标签有js类。
Modernizr对于其他许多应用程序来说都非常棒，如果您之前没有使用它，那么值得一读。http : //modernizr.com/docs/
我总是做的是创build一个空的div。 如果需要显示该组件内的某些数据，则使用$ .ajax（）asynchronous加载数据（即html）。
不需要额外的库。
这是我的build议。 它利用这个解决scheme来创build一个新的CSS规则。 主要的事情：一个隐藏一些HTML的CSS类将被创build，如果JS是可用的，否则不会。 这发生在主要内容（应该是最初隐藏的html部分）之前得到处理！
<html> <head> <style> /* This class gets overwritten if JS is enabled. If a css file (bootstrap, ...) gets loaded with such a class this would be also overwritten. This solution does not require the class. It is here just to show that it has no effect if JS is activated.*/ .hidden { display: block; background: red; } </style> <script> // this is copied from the linked stackoverflow reply: function setStyle(cssText) { var sheet = document.createElement('style'); sheet.type = 'text/css'; /* Optional */ window.customSheet = sheet; (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet); return (setStyle = function (cssText, node) { if (!node || node.parentNode !== sheet) return sheet.appendChild(document.createTextNode(cssText)); node.nodeValue = cssText; return node; })(cssText); } // And now: This class only gets defined if JS is enabled. Otherwise // it will not be created/overwritten. setStyle('.hidden { display: none; }'); // Attention: Now that the class is defined it could be overwritten // in other CSS declarations (in style tags or with loaded CSS files). </script> </head> <body> <button>Show/Hide</button> <div class="">before</div> <div class="my-element hidden"> Content that should be initially hidden if possible. You may want to multiply this div by some thousands so that you see the effect. With and without JS enabled. </div> <div class="">after</div> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script> // Here is some 'normal' JS code. Very likely loaded as a JS file: $('button').click(function () { $('.my-element').toggleClass('hidden'); // or setting display directly: // $('.my-element').toggle() // but well, having class hidden though it is not // hidden makes is not so nice... }) </script> </body> </html>
有点复杂，但我认为这是一个合适的解决scheme。 其优点是防止闪烁，并且如果JS未启用，它将工作。 而且它不需要jQuery。
经过一段时间的思考，我已经想到了以下解决scheme。 相比于我的其他解决scheme，我已经减less到必要的部分（并用这个由JS添加一个类）：
<html> <head> <style> /* This could be also part of an css file: */ .container-with-hidden-elements .element { display: none; } </style> </head> <body> <div class="container"> <script> document.getElementsByClassName('container')[0] .className += ' container-with-hidden-elements'; </script> <div class="element">Content that should be initially hidden if possible.</div> </div> </body> </html>
脚本标签立即执行，并将一个类添加到容器。 在这个容器中有一些嵌套的元素现在被隐藏了，因为容器已经有特殊的类了，现在有一个CSS规则现在有效果。
同样，这发生在剩余的html被处理之前（防止闪烁）。 而且，如果JS被禁用，所有的元素默认都是可见的 – 也就是所谓的渐进式增强 。
不知道这是否适用于每个浏览器。 但海事组织将是简单和整洁的解决scheme。
