1

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

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

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

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

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

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

StackOverflow刚刚提出了这个答案：这明智吗？抱歉，如果现在这是一个重复的问题，但我认为用我自己的语言写这个问题仍然值得，因为我在搜索过程中没有找到答案。

4

1 回答 1

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>

由于 class 和 CSS 在 head 中，因此在解析 body 时，元素在它们存在时就已经被样式化了。

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

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

于 2013-02-07T09:25:39.873 回答