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

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

この対応方法はアニメーションを設定したい要素に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","");

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー