jQueryでメニューを開いたり閉じたり

[ Web関係 ]

jQueryでメニューリスト（dl要素）の折り畳みをしてみるテスト

とりあえずメモ。

想定しているXHTMLは以下の通り。っていうか私のサイトのサブメニュー部分なんですけどね。

もっと効率の良い書き方もあると思いますが、面倒なのでごり押し。メニューリストの分類数（=dt要素）が多いようであれば、一連の処理を一つの関数にまとめてしまって、dt要素のid属性を変数にして処理した方がいいと思います。

<dl id="SUB_NAVI">
<dt id="category">カテゴリー</dt>
<dd>
<ul>
<li>カテゴリー1</li>
<li>カテゴリー2</li>
</ul>
</dd>
<dt id="monthlyLog">月別過去ログ</dt>
<dd>
<ul>
<li>2007年3月</li>
<li>2007年2月</li>
</ul>
</dd>
</dl>

スクリプト本体は下記のとおり。

//オンマウスでハイライト表示
$("dl#SUB_NAVI > dt").hover(function(){
  $(this).css("background-color","#CCE");
},function(){
  $(this).css("background-color","#F6F6F6");
});

//dd要素はロード時に隠す
$("dt#category + dd").hide();
$("dt#monthly + dd").hide();

//クリックで折りたたみ
$("dl#SUB_NAVI > dt#category").click(function(){
  $("dt#category + dd").slideToggle("fast");
});

$("dl#SUB_NAVI > dt#monthlyLog").click(function(){
  $("dt#monthlyLog + dd").slideToggle("fast");
});

あくまで私のサイト用なので、汎用性は低め。しかも私のサイトで使うときですらidの指定増やさないといけないし。HTML変えないで何とかならないかなぁ。要検討って感じ。当たり前ですが、要素名とかid属性値なんかを変更すれば他のサイトでも使えます。っていうかこのくらいなら、ちょっと（30分くらい）勉強すればすぐ書けちゃうので、自分で書いたほうが早いし、分かりやすいと思います。

ちなみに私のサイトで上記スクリプトを使う予定は無いです。なんか微妙に見づらいし。

jQueryを選んだワケ

似たような(?)Ajax用JavaScriptライブラリでprototype.jsとかいうのもあるけど、私がjQueryを選んだのは何故か。理由は単純かつくだらない。最初に見たのがたまたまjQueryだったから。たぶん、prototype.jsを先に見てたらそっちを使っていたと思います。

ただ、結果的に今の選択は間違ってなかったと思います。prototype.jsを使ったスクリプトのソースを眺めてみたけど頭が痛くなったから止めました。私は基本的にプログラマー（に向いてる頭の構造）ではないので、複雑なソースは苦手。

BGM : 幽霊楽団 〜 Phantom Ensemble（by ESTi from Cradle -東方幻樂祀典-）

2007年3月12日月曜日 22時58分02秒