如何隐藏要用jquery切换的元素，同时保持逐步增强

本文介绍了如何隐藏要用jquery切换的元素，同时保持逐步增强的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

All the answers I could find recommended adding display:none to css... but for a user without javascript, they will never see the element.

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

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

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

});

仍会导致元素在网页载入期间出现和消失，因为网页在DOM开始呈现之前

still results in an element that appears and disappears during page load because the page begins rendering before the DOM has finished these days.

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

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

at the top of the body just seems too hacky.

.no-js 类中

解决方案

< html> 元素，然后使用该类来定义元素的样式，与html5样板文件+ modernizr一样

to prevent the javascript FOUC and let your page fully accessible you should apply a .no-js class in <html> element and then use that class to style your elements, exactly as html5 boilerplate+modernizr do

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

当然，你必须通过javascript在

of course you have to remove that class via javascript soon in the <head> of your document, with a script like this

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

所以如果javascript被启用，它会把 .no-js class into .js class。

so if javascript is enabled, it will turn the .no-js class into .js class.

使用这种方法，当javascript不可用时，因为在那种情况下，将应用最后的CSS规则，使您的元素可见和可访问。

Using this approach, your page is still accessible even when javascript is not available, because in that scenario the last CSS rule will be applied, leaving your elements visible and accessible.

                        这篇关于如何隐藏要用jquery切换的元素，同时保持逐步增强的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！