jQueryのslideToggleでにょ~んな件


jQueryのslideToggleってすごく便利だと思います。

表示非表示の切替がにょ~んて感じに切り替わる。
1文付け加えるだけで。ステキです。

$("div#hoge").slideToggle();

ただ問題もあるんだなー。これ。
いや、どちらかといえばjQueryよりはブラウザ側の問題。

で今回、tableをslideToggleで制御しようと思ったんだけど、
IEでの挙動が何やら怪しい。
カクカクしたりカクカクしたり、
果てはIE7なんて表示の切り替えってなんですかくらいに動かない。

結局tableをdivで括って解決?
まぁ、解決。。。
わかったことは、どのブラウザでもやっぱりtableに直接slideToggleってやるより
divで括った方が動きがキレイだったってこと。

うん。難しいところです。

やりたかったのはタイトルクリックしたら画像も変えてコンテンツの表示も切り換えるってやつなんだけど。
一応メモ

function slideToggle(){
	$("div#hoge> h2").click(function () {
		var thisId = $(this).attr('id'); //この場合だったらh2のID取得
		//thisにcloseかopenかのclassを持たせておいて判別しつつ
       classを変更させつつでCSSで画像の切替をさせる
                if($(this).hasClass('close')){
			$(this).removeClass('close');
			$(this).addClass('open')
		} else if($(this).hasClass('open')){
			$(this).removeClass('open');
			$(this).addClass('close')			
		}
      //thisのIDによって表示の切替場所指定
		if(thisId == "hogehoge"){			
     		$("div#hogehogeContents").slideToggle();			
		} else if(thisId == "hogehage"){
      		$("div#hogehageContents").slideToggle();
		}										
    });
}

Posted in Web-tips by prolography at 11月 8th, 2009 .
Tags:
海外現地オプショナルツアーなら【VELTRA(ベルトラ)】
ケンコーコム