jQuery でリストの折りたたみ表示 : dogmap.jp

jQuery でリストの折りたたみ表示

Posted by をかもと at 2007年11月1日木曜日

javascript のライブラリ jQuery を使用しようと思って勉強中。
とりあえず、Wordpress のカテゴリリストを折りたたみ表示する script を jQuery ベースで作ってみたので自分用にメモ。

テンプレートのカテゴリリスト表示部分が以下のようになっている前提で作成します。

<ul id="categories-list">
 <?php wp_list_cats('use_desc_for_title=0'); ?>
</ul>

で、書いたソースがこんな感じ。

$(function(){
 // アイコン画像ファイルのパス
 var arrow_close = 'arrow_close.gif';   // サブカテゴリクローズ時のアイコンファイル
 var arrow_open  = 'arrow_open.gif';    // サブカテゴリオープン時のアイコンファイル
 var no_arrow    = 'no_arrow.gif';      // サブカテゴリが無い場合のアイコンファイル

 // サブカテゴリをすべて隠す
 var categories = $('#categories-list');
 $('ul.children', categories).hide();

 // カテゴリリストにアイコンを付加
 var categories_list = $('li', categories);
 categories_list.children('a').css({'padding-left':'12px','background' : 'transparent url(' + na + ') no-repeat left 3px' });

 // クリックイベントを設定する
 categories_list.each(function(){
  // サブカテゴリが有るときの処理
  if($(this).children('ul.children').length > 0) {
   // カテゴリリンクの前のアイコンを変更
   $(this).children('a').css('background-image', 'url(' + arrow_close + ')');
   // カテゴリリンクにクリックイベントを付加
   $(this).children('a').click(function(){
    $(this).css('background-image', 'url(' + ($(this).css('background-image').indexOf(arrow_close) != -1 ? arrow_open : arrow_close) + ')');
    $(this).siblings('ul.children').toggle('fast');
    return false;
   });
  }
 });
});

まずは <ul id="categories-list"> を捕まえてこなければなりませんが、これは $('#categories-list'); で取得できます (8行目)。

この要素の中のサブカテゴリ (<ul class="children">) を、すべて隠すには $('ul.children', $('#categories-list')).hide(); でおっけ(9行目)。

まずは、すべての <li> 要素中の <a> 要素のスタイルを変更して、先頭にアイコンを表示します(12,13行目)。

で、開閉用のアイコンを追加して、子要素を表示/非表示させるクリックイベントを付加しているのが、15〜28行目。

18行目でサブカテゴリの有無を確認。
サブカテゴリがあればスタイルを変更してを表示します(20行目)。
で、この <a> にクリックイベントを付加しているのが 22〜26行目。
23行目は、アイコンを、交互に表示させるために <a> 要素の background-image を書き換えています。
24行目は、兄弟要素から <ul class="children"> を探して、そいつを表示/非表示させます。(toggle() は表示/非表示を交互に行うためのメソッド。)