MT生成のアーカイブリストを折りたたむJQ

月別アーカイブリストを年ごとに折りたたむ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")
が反映されちゃうんじゃないかと思うんですが、、、どうでしょうか。
詳しい人にめぐり合えたら聞いてみます。

コメントの投稿

トラックバック

トラックバック:URL http://watase.bz/mt/mt-tb.cgi/147