jQueryでアコーディオンを設定する際の注意

ネタ元:jQuery.js トピックのしつもんの89

アコーディオンを設定する際に動作がカクカクすることがあります。

サンプル

この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。

高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。

$("dl dd").each(function(){
	$(this).css("height",$(this).height()+"px");
});

サンプル

アニメーションを設定する場合はheightを指定、これ重要です。

リキッドレイアウトの場合

リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。

その場合は以下のclickイベントの最初で高さを指定しておき

$(hoge).css("height",$(hoge).height()+"px");

アニメーションの設定が終了した後に、CSSのheightを無効化しておきます。

css("height","");でcssの指定が無効化できます。

$(hoge).css("height","");

サンプル

関連エントリー

ブロックレベル要素の高さを揃えるheightLine.js
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
JSONとJSONP
jQueryを使ったサンプルコード
複数のjsライブラリを利用する際にonloadを書き換える方法

スポンサードリンク

«減価償却について | メイン | 8のjQueryのすごいTIPS»