78

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

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

2014 年 8 月 8 日更新:

バージョン 1.9 以降を使用heightStyle: "content"している場合に使用します( Tarun の回答)

1.8以下autoHeight: falseに使用（iappwebdevの回答）

4

5 に答える 5

57

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 accordion doesn't work without h3 tags。

知識を向上させるために jQuery API を使用することは非常に重要です。jQuery API についてはhttp://api.jquery.com/にアクセスし、jQuery UI についてはhttp://jqueryui.com/demos/にアクセスします。さらに質問がある場合は、問題の解決を試みた後、調査を行った後、遠慮なく質問してください。

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

于 2012-06-14T14:11:58.860 に答える
17 
$("#accordion").accordion({ 

heightStyle: "content" 

});

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

于 2014-11-20T11:30:23.983 に答える
0

これは私にとってはうまくいきました。

$( ".accordion" ).accordion({ 
 autoHeight: false,
 collapsible: true,
 navigation: true 
 });
于 2014-08-21T13:15:13.233 に答える