A Day In The Life

とあるプログラマの備忘録

Javascriptを使って階層メニューを制御する

階層メニュー用のサンプルを作成しました。

まずクリックしたときに開く/閉じるの制御をするJavaScriptのサンプル

function changeDisplay(id){
 if(document.getElementById(id).style.display=='none'){
  document.getElementById(id).style.display='';
 }  else {
  document.getElementById(id).style.display='none';
 }
}

JavaScriptでstyle属性の切り替えを行っています。display='none'はCSSの属性です。

次は表示部のHTMLサンプル

<a href="changeDisplay('child')">カテゴリー&lt;/a>
<ul id="child" style="display:none">
<li><a>リンク</a></li>
<li><a>リンク</a></li>
</ul>

ol要素にidをふってやるのがコツですね。

以外に簡単にできたのでびっくりです。



業務ではDBに格納されているメニューデータをCompositeパターンを適用して作成したオブジェクトにあらかじめ格納しておき、

表示する時にカスタムタグ(自分で作成)を使用してツリー構造をなめながらこのHTMLを吐き出しています。



はじめはメニューの開く/閉じる制御をAction経由で行っていましたが、クリックするたびにサーバと通信が発生するので負荷軽減のためJavaScriptで制御を行うようにしました。