Question

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

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

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

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

这是有效的，但这意味着对于JS用户，当页面加载时，额外的选项在500ms左右可见，然后它们就会消失。这令人分心。

有没有明智的方法来解决这个问题？

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

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

1 个答案: