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>

クラスとCSSが先頭にあるため、本体が解析されたときに要素が存在するようになると、要素はすでにスタイル設定されています。

デモ： http： //jsfiddle.net/Guffa/YuAyr/

これは、リンクした質問に対する最初の回答のアプローチと似ていますがhtml、マークアップの要素にクラスを追加する必要がなく、コードが代わりにクラスを追加するだけなので、これはややクリーンです。それを削除します。

于 2013-02-07T09:25:39.873 に答える