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() は表示/非表示を交互に行うためのメソッド。)

最後にすべての処理を無名関数の中に閉じ込めて $() に渡してやると、window ロード後に動作するようになります。

簡単ですね 😛

サイドバーの Cateories で動作デモが見れます。

なお、$() は、Prototype.js でも使用しているため、同時に使用する場合はコンフリクトを起こします。
その時は、最初に以下のようにしておけば $() のかわりに j$() として使用できます。

jQuery.noConflict();
var j$ = jQuery;

参考サイト：jQuery 開発者向けメモ