jQueryでアコーディオンパネル

jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。（wikiより転載）
jQueryには次のような機能・特徴がある。
ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択（Sizzle は jQueryプロジェクトからスピンアウト（wikiより転載）

まずは、HTMLとCSSで全て表示状態のパネルを作ることから始める。 定義要素を使用して骨格を作り、その中にimgと文章を埋め込み、それをスタイルシートで整えます。ただ配置するだけだとdlやliの中にimgを入れたときに空間が自動で広がってしまう現象が起こるため、imgに対してvertical-align:bottomを指定します。（この現象を防ぐためには他にもdtに対してfont-sizeとline-heightを0pxにする方法があります） 

<dl>
<dt><img src="../gif/170.gif" alt="" /></dt>
<dd>
<p>jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。（wikiより転載）</p>
</dd>
<dt><img src="../gif/171.gif" alt="" /></dt>
<dd>
<p>jQueryには次のような機能・特徴がある。<br />
ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択（Sizzle は jQueryプロジェクトからスピンアウト（wikiより転載）</p>
</dd>
</dl>

dl {
	margin:0 0 20px 30px;
	}
dt{
	width:400px;
	border:solid 1px #88f;
	cursor:pointer;
	}
dt img {
	vertical-align:bottom;
	}
dd{
	width:398px;
	background:#C3EBFF;
	line-height:20px;
	font-size:14px;
	}

続いて、jQueryの編集に移ります。

訳）最初に登場するdd要素（最初の文章）でないddを非表示にする。dt要素がクリックされたら、もし、クリックされたdt要素の隣のddのcssプロパティを取得して、それが非表示だったら、全てのdd要素を一旦スライドアップ（非表示）し、クリックさらたdt要素の隣のdd要素をスライドダウン（表示）する。 

$(function(){
	$("dd:not(dd:first)").css("display","none");
	$("dt").click(function(){
	if($("+dd",this).css("display")=="none"){
	$("dd").slideUp("slow");
	$("+dd",this).slideDown("slow");
	};
	});
});

2行目の部分は、初期配置を設定するための命令で、一番最初に出てくるdd以外のdd達を非表示にしています。

ここではfirst-child命令は使えないようです（たとえブラウザが対応していても）。dd:first-childは最初に出てくるdd要素という意味ですが、親セレクタdl内で最初に出てくる子要素はdtなので使えません。dd:first（これはjQuery独自のフィルター）であれば最初に出てくるdd要素に対してという意味なので使えます。

4行目の部分は、ifの文　if(){}を使いますが、if文はfunctionのように自分を$(でくくりません。なので閉めの記号は「});」ではなく「};」です。

＋は隣接セレクタで、次の要素を選択するもの。セレクタ、要素、属性・・・と紛らわしいですね。本来ならdt+ddとかになるんですけど、thisの隣と言いたいときは、カンマで最後にthisと記述します。this+"+dd"、this,"+dd"、this+ddいずれに記載でも動きません。

＋はセレクタなので、””でくくらなければなりません。

初期設定命令の位置がクリックの前にあれば、ページを更新しない限りは初期設定が適用されることはありません。 

$(function(){
	$("dd:not(dd:first)").css("display","none");
	$("dt").click(function(){
		if($("+dd",this).css("display")=="none"){
			$("dd").slideUp("slow");
			$("+dd",this).slideDown("slow");
		};
	}).mouseover(function(){
		$("img",this).attr("src",$("img",this).attr("src")
		.replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
	}).mouseout(function(){
		$("img",this).attr("src",$("img",this).attr("src")
		.replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
	});
});

ロールオーバー風にするために、mouseover以下の部分を追加します。mousoverはマウスが乗っかっているとき、mousoutはマウスが外れているときに発火するイベント命令です。

replace（a,b）はaをbに変えるという命令で、上では正規表現を使っていますが、メニューが1つであれば「replace("170","170_on")」とするだけで、170.gifが170_on.gifに変わります。

ところが画像が2種類あるので2行同じ命令を繰り返すのを避けるために正規表現を用います。

.replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)）のようなやつです。/^から$/までが文字列のはじめと終わりで、(.+)が1つ以上の文字列のつながりで、(\.[a-z]+)がドット以下の文字列のつながりのこと。

最初と最後をスラッシュで囲むのは正規表現の決まり。中身の^と$は1つの単語のような短い正規表現なら書かなくたっていい。バックスラッシュ（￥マーク）はエスケープだからドットを文字のドットとみなしている。

（.+）の時点で文字列のつながりを指定してしまっているので、間に入れれるのはアンダーバーとか文字列以外の記号から始まる文字じゃないと区切りが生じないので駄目です。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ