toggle:selector 形態で トグル イベント 割り当てする 関数

折った 咲いた する 機能を 作る 件 面倒な 仕事を 伴う.

一つほど 作る 件 簡便だ. jQueryには slideToggle という 力強い メソッドが ある.

ところが 色々 犬を 作る 見れば まどろみ 面倒だ. コードが 繰り返される.

そのため 簡単に, ボタンを 作って, そこだ ターゲット 名前を 少なくて 与えれば, ターゲットを 折った 咲いた するように 作る そんな イベント ハンドラーを 作った.

こんなに する ところ 基本 アイディアは コード シンタックス ハイライトで 得た.

関数は 下と ようだ.

function bindToggleToToggleClass(){
	$('[class*="toggle:"]').each(function(){
		var className = $(this).attr('class');
		classArray = className.split(' ');
		var toggleTarget;
		for( i = 0 ; i < classArray.length ; i++){
			if(classArray[i].indexOf('toggle:') != -1){
				toggleTarget = classArray[i].replace(/toggle:/,'');
			}
		}
		$(this).css({
			'cursor': 'pointer'
		}).click(function(){
			$(toggleTarget).slideToggle();
		});
		$(toggleTarget).hide();
	})
}

そして html 方では こんなに 使って 与えれば なる.

<input type="button" value="熱気" class="toggle:#targetId"/>
<div style="padding:20px;border:1px solid #ddd" id="targetId">
ここは ターゲット アイディーです.
</div>

それでは 下のように なる. 例題では idを 使ったが, classを 使う 首都 ある. toggle:.targetClass こういう 形式で 少なければ なる.

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。