jQueryアコーディオンプラグインを利用して、私のウェブサイトのメニューを少し強化しようとしています:
http://jqueryui.com/accordion/
これは完全にうまく機能し、利用するのに最適なプラグインだと思います...ただし、これらの結果を達成するには特定のレイアウトが必要であることに気付きました:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
ETC...
</p>
</div>
NB: repeated for every result
</div>
JavaScript が無効になっている場合、このメニューの出力全体 (すべてのカテゴリと情報を含む) が表示されるという点で、これは少し問題です。
これは、一度に出力するにはあまりにも多くの情報であり、これがそもそも PHP で分割された理由です。本質的には、次のようになります。
// No category selected
* Fruits
* Vegetables
// Category selected
o Fruits
- Apples
- Oranges
* Vegetables
// Javascript Disabled
o Fruits
- Apples
- Oranges
* Vegetables
- Potatoes
- Onions
だから私がやりたいのは、JavaScriptを無効にしているユーザーに代替のナビゲーション手段を提供することです（完全に機能し、関係なく動作する古いメニュー）。
私は現在、モダナイザーでいくつかのオプションを利用しています。
私が使用したいくつかのCSSプロパティでブラウザのサポートを増やすために。クラス「js」をbodyタグに追加することで、javascriptが有効になっているかどうかを検出するために使用できることを認識しています。
そこで、古いメニューを含む div 内にラップし、新しいメニューを含む div 内にラップすることにしました。私の考えは、これらの div をdisplay: none;.
先に進む前に、私は本当にここで推測しているだけなので、これについて間違った方法で行っている場合...誰かが私を正しい方向に向けることができれば幸いです. それが邪魔にならないようにして、これに関連するstackoverflowに関する記事を見つけました：
ブラウザで有効な JavaScript を検出するための PHP と <noscript> の組み合わせ
そして、jQueryに関する私の非常に限られた知識で、私が達成したいものに合うように少し調整しました:
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
</script>
今私が直面している問題は、このスクリプトを登録したり、目に見える違いを生じさせたりすることができないということです。ソースの body タグを見ると、body タグにクラスがありません。思ったようにメニューがトリガーされず、かなり時間が経ちました... 非常に混乱しています。
この現在の問題を解決するのに役立つ支援、アドバイス、情報、または指示を誰かが提供してくれたら、本当に感謝します!
私のLINEストーリーを読んでくれてありがとう！:)
編集：
@RomainPaulusはこれを提案し、それは機能します：
<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
// Remove the no-js and add the js (because JS is enabled (were using it!!)
$("body").removeClass("no-js").addClass("js");
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
// JS Enabled
$("#oldMenu").css("display", "none");
$("#newMenu").css("display", "inline");
} else {
// JS NOT enabled
$("#newMenu").css("display", "none");
$("#oldMenu").css("display", "inline");
}
})
</script>