月別アーカイブリストを年ごとに折りたたむjqueryにトライしました。
このサイトのサイドバーにも反映してみました。
←
←
←
←
参考にした本は、「Movable Type 4.x クリエイターが身につけておくべき100の法則。」（発行：インプレスジャパン）です。
4.xなので、もう使えない機能もたまにありますが、今回は5.04にも使えました。
ソースは以下です。
<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly">
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList></ol>
</li>
</MTArchiveList></ol>
</dd>
</dl>
基本は上記ですが、
今回、今年度のは別に記載したので、去年から過去の表示が欲しい。
と言うことで、ちょっとつけたし。
<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly"><MTArchivePrevious>
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
</MTArchiveList></ol>
</li></MTArchivePrevious>
</MTArchiveList></ol>
</dd>
</dl>
------------
<MTArchivePrevious>タグを使います。
さて、
jqueryが入ってなければダウンロードして<head>内で読み込みます。
その下に新たにjavascriptを書くか、別ファイルにして読み込みます。
$(document).ready(function(){
$(".yearlyList ol").css("display","none")
$(".yearlyList").click(function(){
$(this).children().slideToggle("slow");
});
});
---------
スタイルシートは適宜入れてください。
1点。
.yearlyList{
cursor:pointer;
}
は記述したほうがいいです。しないと、オンマウスでもカーソル形状がかわりませんので、リンクなのかわかりづらいです。
さらに、注意。
「<$MTArchiveTitle$>の記事を見る」
の記述のところにスタイルを入れると、とたんにうまく行かなくなります。
「<$MTArchiveTitle$>の記事を見」る、は残ってて欲しいのに、表れた下層リストに押し出されて消えてしまうんです。
そこに背景バーイラストをおきたかったので、いろいろ試しました。
で、行き着いたのでが、
.yearlyListに背景画像をいれて、下のolにその分マージンを取るスタイルを入れました。
それで、なんとかうまく行きましたよ。
よく分からないけど、
js記述内の
.css("display","none")
が反映されちゃうんじゃないかと思うんですが、、、どうでしょうか。
詳しい人にめぐり合えたら聞いてみます。
