REDLINE MAGAZINE | jQueryでリストを開閉させたいREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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の人から見たら私かなりおかしな事してると思うけど、とりあえず楽しいからよし。何事も楽しくないと・・・。

<< MacでPHPからMySQLに繋がらない→解決 | XHTML Role属性モジュール >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/166

コメント (9)

こんばんはー
HappyLifeのhirasawaです。

jQueryでアコーディオン、そして、この挙動。
まさに求めていたものです!!

もう少ししたらHappyLifeで使わせて頂くかと思います。

なぜか匿名に...すみません。

>hirasawaさん
こんにちわー。コメントありがとうございます。いつもブログ拝見して勉強させて頂きまくってます(n'∀')η
jQuery、すごく便利ですよねー。(といってもあまりたいした使い方してないんですが・汗)
CSSHappyLife、更新楽しみにしてます!

どもー!
そんな訳で早速使わせてもらいましたっ!

ありがとーございまっす。

>hirasawa さん
おはよーございます(n'∀')η
わーい。ありがとござますー。後ほど探しに行きますw

はじめまして。
jQueryでリストや記事の一部を折りたたみたいと考えていたのですが、なかなか思うようにならず困っておりましたが、こちら様の記事を参考にさせていただくことで希望通りの形になりました。

ようやく思ったとおりの形になりましたので、参考にさせてもらいましたことをご報告させて戴きます。
ありがとうございました。

>りこ。さん
コメントありがとうございます。
お役に立ててよかったです(n' ∀ ') η
また遊びに来てくださいましー。

はじめまして。
jQueryでリストの開閉が中々思うようにいかず、とても参考になり助かりました!
自分もクリックして開くときにcss("display","block")が必要かと思ってました。
slideToggle自体が表示と非表示の切り替えというのため、指定する必要が無いようですね。
ありがとうございました!

>hiroscoさん、はじめまして。
コメントありがとうございました(n'∀')η

>slideToggle自体が表示と非表示の切り替えというのため、指定する必要が無いようですね。
CSS脳からするとそれってすごく不思議な感じしますよね。JSって奥深い・・・。もっと知りたいなーと思います。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。