REDLINE MAGAZINE | jQueryでリストを開閉させたい

jQueryでリストを開閉させたい

こちらの記事、サンプルを拝見して。

Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript

英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。

じゃあそれ、jQueryでやってみよう。

もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるページはこのサイトのカテゴリごとのの一覧リンクを置いているページと仮定して・・・。（>>こういう感じのページです。）

希望としてはこんな感じ。

• 各サブカテゴリのタイトルをクリックしたら内容のリンクリストがダダーと出てくる
• htmlソースをいじるのめんどいからマークアップ変更したくない
• 初期状態は全部閉じてて欲しい

ここまで書いて気付いた。だから要するに「アコーディオン」ってやつですね。jQueryのアコーディオンならEmotional Webさんで見たことあるぞ！と思い出して探してみる。

>>jQueryを使ったアコーディオンメニュー - Emotional Web

素敵なサンプルを見事に発見。よし考え方は理解できた。ではせっかくなのでjQueryを使って違うやり方を模索してみる。上記ページでは「hide」「slideUp」「slideDown」を使って実現されていたが、私はそれ以外をチョイスしてみる。「slideToggle」なんかが使えそうな予感。とりあえず該当部分のマークアップはこういう感じ。

<h3 class="tit_h3">見出し</h3>
<ul class="entrylist01">
<li><a href="#">リンクテキスト</a></li>
<li><a href="#">リンクテキスト</a></li>
省略
</ul>
<h3 class="tit_h3">見出し</h3>
<ul class="entrylist01">
<li><a href="#">リンクテキスト</a></li>
<li><a href="#">リンクテキスト</a></li>
省略
</ul>
<h3 class="tit_h3">見出し</h3>
<ul class="entrylist01">
<li><a href="#">リンクテキスト</a></li>
<li><a href="#">リンクテキスト</a></li>
省略
</ul>

クリックしたら開閉できるようにする予定のh3部分にはaタグは入ってないんですよね。単なるh3の上にマウスが乗ったとき、IEではaタグ以外のhover指定は無視されるのは有名な話だけど、jQueryなら大丈夫。

カーソルを指マークにするのだ！

とりあえずhover時のマウスカーソルを指マーク（pointer）にしないとクリックできる部分だと気付いてもらえなさそうなんでそこをいじる。

$(document).ready(function() {
	$("h3.tit_h3").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
});

「h3.tit_h3」に対してhover状態になった時はpointerへ、マウスが離れたときはデフォルトへ戻す。

リンクリストを最初は隠しておく

ここは単純にjQueryを使ってCSSを指定して隠しておくことにします。

$("ul.entrylist01").css("display","none");

こうやってjsを使って隠しているだけなので、js無効の際はキッチリ中身がダダダーと表示されます。

で、肝心のアコーディオンにしたい部分の話

「h3.tit_h3」がクリックされた時に「h3.tit_h3」の次の要素（ul.entrylist01）に対して「slideToggle」を指定。最初にそのulリスト部分の display を none にしてたからクリックして開くときに.css("display","block")を指定しなきゃならないのかなと思ってたんだけど、別にいらないみたい。javascript分からない人間なので、その辺りの感覚はよく分かりません。なんでだ。なんせそれはなくても動いてる。でも一応コメント化して残してみた。

というわけで完成したのがこれ。

$(document).ready(function() {
	$("h3.tit_h3").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default");
		});
	$("ul.entrylist01").css("display","none");
	$("h3.tit_h3").click(function(){
		$(this).next().slideToggle("slow");
		//$(this).next().css("display","block");
	});
});	

で、実際にこのページに搭載してみました。

>>RedLine Magazine : Laboratoryカテゴリエントリ一覧

全部のブラウザで確認してないけど、一応ちゃんと意図通りの動きはしてるっぽい。

ついでにCSS脳全開で考えた

jQueryはCSSの属性セレクタをガッチリサポートしてくれているので、CSS使いとしてはたまらなく触ってみたいアレを使ってやってみました。

$("ul.entrylist01 a[@href*=css/]").slideToggle("slow");

href属性に「css/」という文字列が入ってるa要素があるulリストをslideToggleする、という意味。今回のページではカテゴリごとにMTがリンクを吐き出すようにしてあるので、同じカテゴリのものは絶対に同じulリスト内にいるわけで、ディレクトリ単位でどのulリストに対して実行するのかを指定してもできるんじゃないかと。（日本語下手だな。）

ほいでもう1つ使ってみたかった「:eq(0)」も引っ付けてみた。

$(".entry_contents h3:eq(0)").click(function(){
$("ul.entrylist01 a[@href*=css/]").slideToggle("slow");
});

「:eq()」は何番目のっていうのを指定するjQueryの独自擬似クラス。こいつでdiv.entry_contentsの中のh3の順番を指定してそれに対してクリックされた時に何かするっていう風に考えた。

>>んじゃこうなった。サンプル

しかしこれはかなりCSS脳。多分。いや、でもピンポイントだけそこだけ開閉したい場合なんかはコレ使えるのか。なんか多分jsの人から見たら私かなりおかしな事してると思うけど、とりあえず楽しいからよし。何事も楽しくないと・・・。

2007年09月09日 15:28 | Red | パーマリンク