jQueryと再起関数でツリーメニュー
2009.11.17 火曜日
任意の数の多段に対応したツリーメニュー。
リクエストに、階層単位での処理(開く際に同階層の他のメニューを閉じる)があったんで再起関数を使ったんだけど、jQueryのセレクタでちょっと戸惑った。
再起で1階層づつ処理したかったんで、上手いことやる方法ないかと探してたんだけど、
parent > child
(親子関係を指定して要素を選択する。)
これって、parentを省略して
$(">child", elem)
って書き方でいけるのね。メモメモ。
サンプル
ソース
HTML
- <script language="javascript" type="text/javascript" src="jquery.js"></script>
- <script language="javascript" type="text/javascript" src="treeMenu.js"></script>
- <ul id="sample01" class="sample_ul treeMenu">
- <li><span>Menu1</span>
- <ul>
- <li><a href="#">Menu1.1</a></li>
- <li><a href="#">Menu1.2</a></li>
- <li><a href="#">Menu1.3</a></li>
- </ul>
- </li>
- </ul>
JS
Download: treeMenu.js
- $(document).ready(function(){
- $(".treeMenu ul").hide();
- $(".treeMenu").each(function(){
- TM_init($(this));
- });
- function TM_init(elem, sp, so){
- if (!sp) sp = 400;
- if (!so) so = false;
- $(">li:has(ul)", elem).each(function() {
- var myTree = this;
- $(">:first-child", myTree).click(function(e){
- var target = this;
- $(">li:has(ul)", elem).each(function(){
- if ($(">:first-child", this).get()[0] == target){
- $(">ul:first", this).slideToggle(sp);
- }else if (so == true){
- $(">ul:first", this).slideUp(sp);
- }
- });
- });
- TM_init($(">ul:first", myTree), sp, so);
- });
- }
- });
とりあえずデフォルト状態で、class=”treeMenu”と入っているエレメントに対して自動で設定されるようになってるけど、
速度と挙動(メニューを開いた際に同階層の他のメニューを閉じるか残すか)が変更出来るようにしてあるので、
3～5行目を編集して
//-- 速度と挙動を任意で指定
$(".treeMenu").each(function(){
TM_init($(this), 300, true);
});
$(".treeMenu").each(function(){
TM_init($(this), 300, true);
});
//-- IDを指定して個別設定
TM_init($("#sample01"));
TM_init($("#sample02"), 500, true);
TM_init($("#sample01"));
TM_init($("#sample02"), 500, true);
といった感じでも。
時間もないのでとにかくシンプルにって感じで書いたんだけど、
メニューを開くトリガーに画像を使いたいって事だったので、開閉に応じた画像のスワップとかのリクエストもありそう。
コールバック関数とか渡せるようにしといたら便利になるかなぁ。