Question

我正在使用JQuery Accordion。我在这里有这个页面：http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

自动高度需要一些时间才能加载，在加载之前，内容下面会有很多空白区域。当它最终加载时，高度将扩展为更长，然后捕捉到内容的正确高度。有没有办法让它无缝衔接？我只想点击一个Accordion标签，让它平滑地扩展到内容的确切高度。

2014年8月8日更新：

如果您使用version 1.9 and higher（Tarun's回答），请使用heightStyle: "content"

将autoHeight: false用于1.8 and lower（iappwebdev的回答）

Answer 1

你应该使用

$("#accordion").accordion({ 

heightStyle: "content" 

});

根据您的内容设置高度。并且不会使用空格作为高度。

Answer 2

那你为什么不把autoheight设为假？

$( ".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，因此每个标签都会获得固定的高度。将所有选项置于一个调用中：

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

的修改

关于你的第二条评论：

看看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/。如果您还有其他问题，请不要犹豫后尝试解决问题，之后进行一些研究。

如果所有这些都回答了您的问题，请将其标记为正确答案。

Answer 3

$("#accordion").accordion({ 

heightStyle: "content" 

});

这是在新版本中使用它为我工作!!!

Answer 4

这对我有用。

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

Answer 5

如果到目前为止没有任何作用，只需调整jQuery Accordion contentElement的大小 - 默认情况下调用它为data-content，除非您对其进行了不同的配置：

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

如果您想在动态加载数据后调整Accordion的大小，这也会有效。

JQuery手风琴自动高度问题

5 个答案: