JavaScriptコーディング

ツリークリックで表示On・Off

2008年08月08日
カテゴリ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が変わるので、サーバーにも情報を渡してやらなければいけません。


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