JavaScriptコーディング

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

とします。これを、

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

と表示しておき、カテゴリ1-2がクリックされたら、
カテゴリ1-2-1
カテゴリ1-2-2
が表示されるようにします。再度クリックされると、表示が消えます。


表示・非表示で画面をリロードしたくないので、ブラウザ側で動くJavaScriptで書きます。


まず、JavaScript。
flag = new Array();
function tree(menu){
　　tree_list = document.getElementById("tree" + menu);
　　if(flag[menu] == 1){
　　　　tree_list.style.display='none';
　　　　flag[menu] = 0;
　　}
　　else{
　　　　tree_list.style.display='block';
　　　　flag[menu] = 1;
　　}
}

を外部ファイル【function.js】として保存します。


次にhtml。
適切なことろで、【function.js】を読み込みます。
<script type="text/javascript" src="function.js"></script>


更にカテゴリ1-2に
<a href="#" onclick="tree(0)">└ カテゴリ1-2</a>
<div id="tree0" style="display:none;>
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
</div>

とします。


画面を表示したときは、【style="display:none;】があるので、カテゴリ1-2-1と1-2-2は表示されません。

カテゴリ1-2がクリックされると、JavaScriptのtree関数がCallされます。flag[menu]の値によって表示・非表示を切り替えることができます。現在非表示なら表示され、表示されていれば非表示になります。


これで、カテゴリ1-2をクリックで、表示と非表示を切り替えることができるようになりました。


しかし、このままでは、画面をリロードするたびに、カテゴリ1-2が非表示になります。

例えば、カテゴリ1-2を展開した状態で、カテゴリ1-2-1のリンクをクリックすると・・・
カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　　└ カテゴリ1-2-1
　　└ カテゴリ1-2-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

から

カテゴリ1
　└ カテゴリ1-1
　└ カテゴリ1-2
　└ カテゴリ1-3
カテゴリ2
　・
　・
　・

と閉じた状態に戻ってしまいます。

これって、ウザくないですか？ そうでもない？

次にカテゴリ1-2-2を見たいのに、またカテゴリ1-2にマウスを持っていって、クリックして展開しないといけない・・・


そこで、展開したら、展開したままにする方法を考えてみました。
この場合はブラウザ側だけではすみません。URLが変わるので、サーバーにも情報を渡してやらなければいけません。


ちょっと長くなったので、続きはまた。