渐进式增强和“未隐藏内容的闪现”？答案

【问题标题】：Progressive enhancement and "flash of unhidden content"?渐进式增强和“未隐藏内容的闪现”？
【发布时间】：2013-02-07 09:14:01
【问题描述】：

我正在尝试构建一个适用于 JS 和非 JS 用户的渐进增强页面。我想最初为 JS 用户隐藏一些表单控件，但总是为非 JS 用户显示它们。

我的问题是如何做到这一点，而不会为 JS 用户创建令人分心的“可见，然后立即隐藏”的内容闪现。

例如，在 JS 版本中，我想折叠部分搜索表单，而是显示“单击此处获取额外选项”按钮。我这样做如下：

$(document).ready(function() { 
  $("#extra-options").hide();
  ...
  $("#show-extra-options").click(function() { 
     $("#extra-options").slideToggle();
  });
});

这可行，但这意味着对于 JS 用户，当页面加载时，额外的选项可见 500 毫秒左右，然后它们就消失了。它比较分散注意力。

有什么明智的方法来解决这个问题吗？

StackOverflow has just suggested this answer: 这合理吗？抱歉，如果现在这是一个重复的问题，但我认为用我自己的语言写这个问题仍然值得，因为我在搜索过程中没有找到答案。

【问题讨论】：

标签： javascript css progressive-enhancement

【解决方案1】：

在你的脚本标签中添加这个：

$('html').addClass('js');

然后你可以用它来显示和隐藏元素：

.hasJs { display: none; }
.js .hasJs { display: block; }
.js .noJs { display: none; }

您可以为使用或不使用 Javascript 的用户隐藏内容：

<div class="hasJs">Some content only visible for JS users.</div>
<div class="noJs">Some content only visible for non-JS users.</div>

由于类和 CSS 都在头部，当元素被解析时，它们就已经被样式化了。

演示：http://jsfiddle.net/Guffa/YuAyr/

这与您链接到的问题的第一个答案中的方法类似，但这样更简洁，因为您不必向标记中的 html 元素添加类，并且代码只是添加类而不是删除它。

【讨论】：