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')">カテゴリー</a> <ul id="child" style="display:none"> <li><a>リンク</a></li> <li><a>リンク</a></li> </ul>
ol要素にidをふってやるのがコツですね。
以外に簡単にできたのでびっくりです。
業務ではDBに格納されているメニューデータをCompositeパターンを適用して作成したオブジェクトにあらかじめ格納しておき、
表示する時にカスタムタグ(自分で作成)を使用してツリー構造をなめながらこのHTMLを吐き出しています。
はじめはメニューの開く/閉じる制御をAction経由で行っていましたが、クリックするたびにサーバと通信が発生するので負荷軽減のためJavaScriptで制御を行うようにしました。