web-dev-qa-db-ja.com

JQuery Accordion Auto Heightの問題

JQuery Accordionを使用しています。ここにこのページがあります： http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

起こることは、自動高さがロードするのに時間がかかることです。ロードする前に、コンテンツの下に多くの空白があります。最終的にロードされると、高さが長くなり、コンテンツの正しい高さにスナップします。これをシームレスにする方法はありますか？アコーディオンタブをクリックして、コンテンツの正確な高さまでスムーズに拡張できるようにしたいだけです。

2014年8月8日更新：

バージョン1.9以降 （ Tarun's answer）を使用している場合は、heightStyle: "content"を使用します

1.8以前 にはautoHeight: falseを使用します（iappwebdevの答え）

jqueryaccordion
74
Kim

それでは、なぜautoheightをfalseに設定しないのですか？

$( ".selector" ).accordion({ autoHeight: false });

http://jqueryui.com/demos/accordion/#option-autoHeight

編集

コメントを見る：

// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ autoHeight: false, navigation: true });

アコーディオンを初期化してから、さらにオプションを追加します。どうしてそんなことをするのか？ autoHeightのデフォルト値はtrueであるため、すべてのタブの高さが固定されます。すべてのオプションを1回の呼び出しで入力します。

// Accordion
$("#accordion").accordion({
    header: "h3",
    collapsible: true,
    autoHeight: false,
    navigation: true 
});



編集

2番目のコメントについて：

http://jqueryui.com/demos/accordion/#option-header をご覧ください。オプションh3がデフォルトで設定されていることがわかるので、呼び出しで設定する必要はありません。

そして、あなたはここであなたの質問に対する答えを得ます： JQueryアコーディオンはh3タグなしでは動作しません 。

知識を向上させるには、jQuery APIを使用することが非常に重要です。 jQuery APIの場合は http://api.jquery.com/ に移動し、jQuery UIの場合は http://jqueryui.com/demos/ に移動します。さらに質問がある場合は、遠慮なく質問してくださいafterあなたは問題を解決しようとしましたafterいくつかの調査を行いました。

これらすべてがあなたの質問に答えた場合、正解としてマークしてください。

56
iappwebdev

あなたは使うべきです

$("#accordion").accordion({ 

heightStyle: "content" 

});

コンテンツに応じて高さが設定されます。高さとして空白スペースを使用しません。

155
Tarun Gupta
$("#accordion").accordion({ 

heightStyle: "content" 

});

これは私のために働いた新しいバージョンで動作しています!!!

11
mithunSalinda

これまでのところ何も機能しない場合は、jQuery Accordionのサイズを変更してくださいcontentElement-異なる設定をしない限り、デフォルトでdata-contentと呼ばれます：

$('.accordion').find('[data-content]').resize();

これは、データが動的にロードされた後にアコーディオンのサイズを変更する場合にも機能します。

0
tsveti_iko

これは私のために働いた。

$( ".accordion" ).accordion({ 
 autoHeight: false,
 collapsible: true,
 navigation: true 
 });
0
Shweta