jqueryで月別アーカイブを年ごとの開閉式メニューにする

このブログのサイドバーの月別アーカイブですが、さすがに６年分ともなるとリストが長く、見苦しいので、jqueryで開閉式のメニューにしてみました。

ソースはこんな感じです。


var rebuildMonthlyArchives = function() {
var mnYearArr = [];

//１．月別アーカイブのリストを走査し、jquery要素を年別に配列に格納
$('#archives ul li a').each(function(){
var $this = $(this),
$this_year = $this.attr("title").substring(0,4);
if(typeof(mnYearArr['mn'+$this_year])==="undefined"){
mnYearArr['mn'+$this_year] = [];
mnYearArr['mn'+$this_year] = $('<li><span class="expand">'+$this_year+'年</span><ul class="monthly"></ul></li>');
}
mnYearArr['mn'+$this_year].find('ul.monthly').append($this.parent());
});

//２．新たにjquery要素を作り、１で配列に入れた要素を入れ、最後に#archivesに戻す
var $jq_obj = $('<ul></ul>');
for (var mni in mnYearArr) {
$jq_obj.append(mnYearArr[mni]);
}
$('#archives ul').remove();
$('#archives').append($jq_obj);

//３．見た目をよくする
$('#archives ul li span.expand').click(function(){
$(this).next().toggle();
if($(this).next().css('display')=="block"){ $(this).css("background-image","url(/imgs/btn_minus.gif)"); }
else{ $(this).css("background-image","url(/imgs/btn_plus.gif)"); }
});
};


ちょっと冗長な感じがするのでもっと短くしたいのですが、とりあえず今回はここまでにします。

あとwpのタグはこうなってます。


<li id="archives">月別アーカイブ
<ul>
 <?php wp_get_archives('type=monthly&show_post_count=true'); ?>
</ul>
 </li>
<script type="text/javascript">rebuildMonthlyArchives();</script>