POPSブログ

jQueryアコーディオン/2

115

  Category:  jquery2012/06/13 pops 

jQueryアコーディオン2、開閉連動形のAccordion(clickタイプ)。開いているところを閉じてから、指定位置を開く形式です。

 

アコーディオン2(clickタイプ)

最も一般的な縦方向に伸縮する "バーチカルアコーディオン" は当方では単純に「アコーディオン」と呼ぶことにします。


Accordion Menu サンプル 3種類

簡易方式の「開閉連動形アコーディオン」です。他のラベルを押せば開いているところが自動で閉じるタイプです。これには jQuery の siblings() が使用されています。簡単に構成できるので便利ですが、HTML構造により問題もあります。


このページ記載、3種類のサンプルを「単純効率化」「同時に開閉」するアコーディオンにしました。スクリプトが簡素ですから判り易いかも知れません。「デモ専用ページ」で表示します。

● [ 追加 ]、デモページは [ jqury-1.9.0 ] で動作しています。 2013/01/31追加


[1] 開閉連動形 (div使用)

accordion-d.js/下のタイトルをクリックください。どんな場所でも使えるようにdivで作成


タイトル 1

Accordion Menu Example
サブタイトル、文字、リンクなどを記入する。

タイトル 2

Accordion Menu Example

タイトル 3

Accordion Menu Example
サブタイトル、文字、リンクなどを記入する

簡単な説明

最も単純で簡単な方法である、但しクリックするエベントの直下に開閉すべくコンテンツがあることが条件である。jQueryのslideToggleを使用している。slideが自動で入り切りなるので便利な場合あり。
開いているところが自動的に閉じるので、ページの高さがある程度変わらない見易さが特徴である。開いている場所の検索には siblings() が使用されています。


HTML


<div class="accordion-d">
	<h3 class="accordion-head4">タイトル 1</h3>
	<div>Accordion Menu Example<br />サブタイトル、文字、リンクなどを記入する。</div>
	<h3 class="accordion-head4">タイトル 2</h3>
	<div>Accordion Menu Example
		<ul>
			<li><a href="javascript:void(0);">リンク1</a></li>
			<li><a href="javascript:void(0);">リンク2</a></li>
			<li><a href="javascript:void(0);">リンク3</a></li>
		</ul>
	</div>
	<h3 class="accordion-head4">タイトル 3</h3>
	<div>Accordion Menu Example<br />サブタイトル、文字、リンクなどを記入する</div>
</div>

JS


//accordion-d.js
(function($){

	$(function(){

		//全てを閉じる
		$('.accordion-d > div').hide();
		//クリックアクション設定
		$('.accordion-d > h3').click(function() {
			//オブジェクトを代入
			var hitItem = $(this).next();
			//開いている要素
			var openItem = hitItem.siblings('div:visible');
			//開いている要素があれば最初に閉じる
			if (openItem.length ) {
				openItem.slideUp('fast', function() {
					hitItem.slideToggle('fast');
				});
			} else {
				hitItem.slideToggle('fast');
			}
		});
	});
})(jQuery);

----------------------------------------
アニメ速度 fast normal slow の3種類指定可能、
数値で設定する場合はミリ秒を書く
slideToggle('400')等、(400)でも良い、長くすると負荷が大きいので注意ください
----------------------------------------
開いている要素をしらべる(変数に代入して使用している)
var openItem = hitItem.siblings('div:visible');
ここでは対象が div になっています。もし ul で構成しているなら ul が対象になるだけです

CSS


/* accordion-d.css div連動形*/
.accordion-d {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
.accordion-d div {
	margin:5px;
}
.accordion-head4 {
	width:289px;
	padding-left:10px;
	border-top:1px #000000 solid;
	background-color:#AAAAAA;
	color:#FFFFFF;
	cursor:pointer;
}

----------------------------------------
使用者により大きさ、padding margin などちがいますので、各自好みで設定ください
ページのCSSにも影響されますので、調整は使用者の責任で行ってください。

divブロックの中の、ulの隙間を小さくする方法

上の例の2段目の中に、ulブロックが使用されている。図(図1番)のように上下に隙がある状態で表示される。配置の間隔などの問題でこの隙間を最小にしなければならない場合の方法である。
ulブロックを使用しない場合は起きないので、ulブロックなしで構成したほうが簡便である。


ul を、display:inline にするとIE67 以外隙間は除去される(図2番)。IE67はインデント部が除去されない(図3番)。
IE67 は padding margin で調整できないので、text-indent を調整すれば同じになる(図2番)。



.accordion-d div ul {
	display:inline;
	*text-indent: -15px;/*IE6.7ハック*/
}



[2] 開閉連動形 (ul li使用、問題の出る構造のタイプ)

accordion-e.js/下のタイトルをクリックください。 ul li で作成 注意、外枠はIDで構成しています。



上の例では、外枠を「accordion-e クラス」にした場合 ul のCSSが壊れてしまい、レイアウトがくずれます。


「ulブロック」構成の場合は問題が出やすいので注意が必要です。

● ul要素が「display:block」で無ければ、"ul:visible"を認識せず旨く動作しない。「dl div」構成なら正常に認識する。但しJSが正常に動作しても、余白が入る、li要素の最後が伸びる、li要素のmarginなど効かないなどの不具合がおきる場合がある。
● 通常 ul li要素に関するCSS設定が多いので、jquery の hide() などで一旦消したのを戻す際に旨くプロパテイが処理できていないのが原因とは思うが、ページのCSSによってもかなり影響があるでしょう。
● 上の例では、アコーディオン外枠を、クラスではなく「id 」にしてjQuery認識を高めて解決しました。そのほか、ul要素にクラスを与えるなどの処理も必要かも知れません。問題が起きた場合解決に時間がかかりそう。


ulブロック構成は問題が多いので、CMSでのHTML修正の効かない場合などの、緊急用途に限定したほうが良い。またはCMS専用のアコーディオンを使用するなどの方法を取ったほうが賢明。アタマが「パピプペポ」になるゼヨ。


HTML構造を変えることが出来るなら、上の[1]のように「ul li」部分を「div要素」の中に入れる構造にしたほうが問題は出難い。


HTML

注意、外枠#accordion-e、「ID」で構成しています。


<div id="accordion-e">
	<h3 class="accordion-head5">タイトル 1</h3>
	<ul>
		<li><a href="javascript:void(0);">リンク1</a></li>
		<li><a href="javascript:void(0);">リンク2</a></li>
		<li><a href="javascript:void(0);">リンク3</a></li>
	</ul>
	<h3 class="accordion-head5">タイトル 2</h3>
	<ul>
		<li><a href="javascript:void(0);">リンク4</a></li>
		<li><a href="javascript:void(0);">リンク5</a></li>
		<li><a href="javascript:void(0);">リンク6</a></li>
	</ul>
	<h3 class="accordion-head5">タイトル 3</h3>
	<ul>
		<li><a href="javascript:void(0);">リンク7</a></li>
		<li><a href="javascript:void(0);">リンク8</a></li>
		<li><a href="javascript:void(0);">リンク9</a></li>
	</ul>
</div>

JS


//accordion-e.js
(function($){

	$(function(){

		//番号保存変数、初期値-1
		var keep_no = -1;
		//全てを閉じる
		$('#accordion-e > ul').hide();
		//クリックアクション設定
		$('#accordion-e > h3').click(function() {

			//要素の番号を取得
			var no=$("#accordion-e > h3").index(this);
			//activeクラス処理
			$('.accordion-head5').removeClass("active");
			if (keep_no != no) {$(this).addClass("active");}

			//UL要素オブジェクトを代入
			var hitItem = $(this).next();
			//開いている要素
			var openItem = hitItem.siblings('ul:visible');
			//開いている要素があれば最初に閉じる
			if (openItem.length ) {
				openItem.slideUp('fast', function() {
					hitItem.slideToggle('fast');
				});
			} else {
				hitItem.slideToggle('fast');
			}
			//番号保存
			keep_no = no;
		});
		//hover-ACTION
		$(".accordion-head5").hover(
			function () {
  				$(this).addClass("title-hover");
			}, 
			function () {
  				$(this).removeClass("title-hover");
		});
	});

})(jQuery);

1. active クラス処理は、押した所の要素番号と処理すべき番号が違う場合がありますので、2つの変数を 比較してactiveな要素位置を算出、CSSで変化させています。
2. ホーバーした時のアクション追加、title-hoverクラスを与えて、CSSで背景色変化をさせました。
3. クラス名は使用者の都合で変える場合は書き換えてください。CSSの設定も自由です。
4. 矢印画像使用の場合は、次の[3]を参照ください。


CSS

注意、ulブロックは display:block にCSS設定しています。


/* accordion-e.css ul連動形 #accordion-eを使用 */
#accordion-e {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
#accordion-e ul {
	display:block;/*最重要 block であること*/
	list-style-type:none;
	margin:0;
	padding:0;
}
#accordion-e ul li {
	list-style-type:none;
	width:285px;
	margin-left:5px;
	padding:0;
}
#accordion-e .accordion-head5 {
	width:290px;
	margin:0;
	padding-left:10px;
	border-top:1px #000000 solid;
	color:#FFFFFF;
	background-color:#AAAAAA;
	cursor:pointer;
}

#accordion-e h3.active {
	color:#6496ED;
}
#accordion-e h3.title-hover {
	background-color:#CCCCCC;
}



[3] 開閉連動形 (dl dt使用)

accordion-f.js/下のタイトルをクリックください。dl dt で作成



dl div なら認識するし正常になる。こちらを勧める。
但し dl dt を使用のため振る舞いが違う、CSSの修正が必要になる。dl dtの特性を調べて利用ください。


HTML


<div class="accordion-f">
	<h3 class="accordion-head6">タイトル 1</h3>
	<dl>
		<dt><a href="javascript:void(0);">リンク1</a></dt>
		<dt><a href="javascript:void(0);">リンク2</a></dt>
		<dt><a href="javascript:void(0);">リンク3</a></dt>
	</dl>
	<h3 class="accordion-head6">タイトル 2</h3>
	<dl>
		<dt><a href="javascript:void(0);">リンク4</a></dt>
		<dt><a href="javascript:void(0);">リンク5</a></dt>
		<dt><a href="javascript:void(0);">リンク6</a></dt>
	</dl>
	<h3 class="accordion-head6">タイトル 3</h3>
	<dl>
		<dt><a href="javascript:void(0);">リンク7</a></dt>
		<dt><a href="javascript:void(0);">リンク8</a></dt>
		<dt><a href="javascript:void(0);">リンク9</a></dt>
	</dl>
</div>

JS


//accordion-f.js
(function($){

	$(function(){

		//番号保存変数、初期値-1
		var keep_no = -1;
		//全てを閉じる
		$('.accordion-f > dl').hide();
		//クリックアクション設定
		$('.accordion-f > h3').click(function() {

			//要素の番号を取得
			var no=$(".accordion-f > h3").index(this);
			//activeクラス処理
			$('.accordion-head6').removeClass("active");
			if (keep_no != no) {$(this).addClass("active");}

			//DL要素オブジェクトを代入
			var hitItem = $(this).next();
			//開いている要素
			var openItem = hitItem.siblings('dl:visible');
			//開いている要素があれば最初に閉じる
			if (openItem.length ) {
				openItem.slideUp('fast', function() {
					hitItem.slideToggle('fast');
				});
			} else {
				hitItem.slideToggle('fast');
			}
			//番号保存
			keep_no = no;
		});
		//hover-ACTION
		$(".accordion-head6").hover(
			function () {
  				$(this).addClass("title-hover");
			}, 
			function () {
  				$(this).removeClass("title-hover");
		});
	});

})(jQuery);

CSS


/* accordion-f.css dl連動形 */
.accordion-f {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
.accordion-f dl {
	width:280px;
	margin:0;
	padding:0;
}
.accordion-f dl dt {
	width:285px;
	margin-left:10px;
}

.accordion-head6 {
	width:290px;
	height:20px;
	padding-left:10px;
	border-top:1px #000000 solid;
	background:url(/main/images/arrow.gif) no-repeat;
	background-position:right 0px;
	background-color:#AAAAAA;
	color:#FFFFFF;
	cursor:pointer;
}
.accordion-f h3.active {
	background-position:right -22px;
	color:#FF0000;
}
.accordion-head6.title-hover {
	background-color:#CCCCCC;
}



[ 追加 ]、単純効率化サンプルのデモ


このページ記載、3種類のサンプルを「単純効率化」「同時に開閉」するアコーディオンにしました。スクリプトが簡素ですから判り易いかも知れません。「デモ専用ページ」で表示します。

● [ 追加 ]、デモページは [ jqury-1.9.0 ] で動作しています。 2013/01/31追加



共通のまとめ、注意事項

1. 変化に際してのクラス名、CSSの指定方法などは、使用者の自由である。(状況により変える)
2. [1]のHTMLに表示のように、原則 div要素で出来たブロック構成向きで、上にラベル(h3など)があることです。ul li要素構成の場合は問題が出やすい。代替え手段としてdl dt要素構成が使用できます。
3. slideToggleは便利ではあるが、反面、細やかな操作を設定するには向かない。多少変化を付けてみた。
4. ここでのactiveクラス処理は「全て閉じている」状態の場合で有効。事前に「開くアイテム指定」には向かない。
5. 各種プラグインもありますが、アコーディオンはこれだけの記述で使用できるので、使用者が作ったほうが効率的です。JSも書き方は沢山あるとおもいます。一例です。
6. jquery-1.4以上、CSSはサンプル用の暫定です。(1.4以下でも動きますが、調べていません)
7. ブラウザは全てでOKと思います。(IE6-8.Chrome.Opera.Firefox.Safari)、但しIE9以降は確認していません。動くものと思っていますが、問題ある場合は連絡ください。


上記サンプルのCSSは簡単な例であって、完全オールブラウザ対応では無く、且つこのページのCSSも影響しています。最終的には使用者が構造、ページなどにあわせて決定してください。


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

透過矢印画像 21x44

siblings を使用した、jQuery Accordion の資料は、次ぎのサイトが詳しいです。参考にしましょう。

【参考サイト】:roshanbh.com Making accordion menu using jquery

【参考サイト】:webdesignerwall.com jQuery Tutorials for Designers

【参考サイト】:triplexxx.jp jQueryでアコーディオンメニューを作成する


以上です。

 


[ この記事のURL ]


タグ:series , Accordion , jquery

[ jQueryアコーディオン シリーズ記事 ]

jQueryアコーディオンHoverMenu/62012.07.02
jQueryアコーディオンHoverMenu/52012.07.01
jQueryアコーディオンHoverMenu/42012.06.29
jQueryアコーディオンHoverMenu/32012.06.28
jQueryアコーディオンHoverMenu/22012.06.26
jQueryアコーディオンHoverMenu/12012.06.25
jQueryアコーディオン/82012.06.20
jQueryアコーディオン/72012.06.19
jQueryアコーディオン/62012.06.18
jQueryアコーディオン/52012.06.17
jQueryアコーディオン/42012.06.16
jQueryアコーディオン/32012.06.15
jQueryアコーディオン/22012.06.13
jQueryアコーディオン/12012.06.11

 

ブログ記事一覧

年別アーカイブ一覧



[1]