javascript - 渐进增强和 "flash of unhidden content"？

Question

我正在尝试构建一个适用于 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 : 这明智吗？抱歉，如果现在这是一个重复的问题，但我认为仍然值得用我自己的语言写这个问题，因为我在搜索过程中没有找到答案。

Answer 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 元素添加类标记，代码只是添加类而不是删除它。