ヘッダーをクリックして論理セクションに分割されたコンテンツを展開/折りたたみますが、
それらのセクションにはデフォルトの高さが定義されています。固定の
高さ、つまり200pxを指定する必要があるとします。ヘッダーのクリック後に展開される高さをカスタマイズするにはどうすればよいですか。セクション1とセクション2<html> <head> <meta charset="utf-8" /> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery- ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> </head> <div id="accordion"> <h3>Section 1</h3> <div> <p> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>Section 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> </div> </html> javascript:- $(function() { $( "#accordion" ).accordion(); });
1 に答える
0
コンテンツの高さが気になる場合は、「heightStyle」プロパティを確認するか、カスタムの高さロジックを使用する場合は、「beforeActivate」イベントを使用できます。イベントは、タブをアクティブにする前に発生します。したがって、この場合、高さの変更が可能になる可能性があります。
$(function() {
$("#accordion").accordion({
collapsible: true,
active: false,
beforeActivate: function(event, ui){
$(ui.newPanel).css('height', '20');
}
});
});
お役に立てれば。
于 2012-11-23T07:01:20.507 に答える