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


ちょっと長くなったので、続きはまた。
2008年08月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
先月
来月
カテゴリ
検索
関連サイト
プロフィール
【ネットネーム】
みゅー

キャラクター by ツカエルサイト


【趣味】
・プログラミング
・写真
・楽器演奏
・手芸
・日曜大工
・家の中の不便を便利に
・考える
・自然科学
・猫と戯れる
・ジグソーパズル

【仕事】
・派遣社員でSE・PGやっていました。次の良い仕事がみつからないので、ビジネスへ注力しようと思っています。
・経験言語:VB6、VB.NET、PHP、Perl、JAVA、Oracle、SQLServer、PostgreSQL



【名前】
アン(足)

2014年4月22日生まれ 女の子
あだ名は くノ一
普段は普通にしゃべりますが、興奮すると『ニャ』を連発します

【趣味】
・狩
・ご飯を食べる
・ママのお手伝い

【仕事】
ママのビジネスの看板招き猫
ママの代わりにPC入力
仕事中のママの右腕を温める
ママに心配をかける
いろんな事をしでかしてママを退屈させない

RSSフィード
Tweet