javascriptが無効の場合、展開可能なjQueryコンテンツを扱う

Question

私が現在取り組んでいるウェブサイトにはメッセージングツールがあります。アイデアは、各メッセージのヘッダdivとディテールdiv（display = "none"）を持つことです。

JavaScriptが有効な場合は、ヘッダーが表示され、ユーザーがそれをクリックすると詳細のdivがスライドして開きます。

これは問題ありませんが、JavaScriptが無効になっている場合はどうすればよいですか？無効にした場合はすべてのメッセージを展開することを考えていましたが、すべての画像のページが読み込まれたときに一時的にちらつきが発生しないようにしました。

私はASP.NETを使用しており、ブラウザのサーバー側のjavascriptの状態を確認しようとしていましたが、正常に実行できないことがわかりました。

これを達成するための提案はありますか？

Answer 1

実際には、これを行うことができる最も意味的に正しい方法は、javascriptが有効な場合に実装されるスタイルを含むjavascriptを介して頭に別のスタイルシートを追加することです。

この例では、問題の要素のデフォルト表示が保持されます。

次に、追加のスタイルシート（js-enabled-styles.cssなど）を作成し、その中にディスプレイ：noneを配置します。

頭の中のスクリプトタグに、追加のスタイルシートを追加します。これは次のようになりjqueryのを使用して：

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />'); 

Answer 2

ブラウザがJavaScriptを持っているかどうかだけを伝えることができます。有効になっているかどうかのヒントはありません。

試してみることができるのは、onreadyまたはonloadを使用しないことです。JavaScriptの下に行を置き、コンテンツを非表示にするだけです。ページ上の要素の直後に配置することもできます。

<div id="foo"> 
    asdf 
</div> 
<script type="text/javascript"> 
    jQuery("#foo").css("display","none"); 
</script> 

ワンサイドノートあなたが代わりに2つのdivのdefinition listを使用しなければならないように、聞こえます。スクリーンリーダーを使用している人にとってはおそらくもっと意味をなさないでしょう。

Answer 3

あなたは<noscript>タグを探していると思います。

あなたはいくつかの方法の1つで説明した結果を得ることができますが、ここではかなり簡単です。 div秒以下であるためには、あなたのデフォルトのスタイルを定義します。

<style type="text/css"> 
    div.details 
    { 
     display: none; 
    } 
</style> 

そしてこのstyleタグの後に、デフォルトを上書きするnoscriptブロックを使用（JavaScriptが有効になって）のようなスタイル、：

<noscript> 
<style type="text/css"> 
    div.details 
    { 
     display: block; 
    } 
</style> 
</noscript> 

Answer 4

1つのオプションは、（定義されたスタイルの後に）あなたの頭の中でこれを置くことです：

<noscript> 
<style type="text/css"> 
#mydivid {display: block;} 
</style> 
</noscript> 

EDIT： Iveは実際にはa better answerと掲載されています。これは正しいデフォルト状態で動作します。