78

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

发生的情况是自动高度需要一些时间来加载，在它加载之前，内容下方有很多空白。当它最终确实加载时，高度将扩大到更长，然后捕捉到内容的正确高度。有没有办法让它无缝？我只是希望能够单击 Accordion 选项卡并将其平滑地扩展到内容的确切高度。

2014 年 8 月 8 日更新：

heightStyle: "content"如果您使用的是1.9 及更高版本，请使用（Tarun 的回答）

用于1.8 及更低版本（iappwebdev 的回答autoHeight: false）

4

5 回答 5

166

你应该使用

$("#accordion").accordion({ 

heightStyle: "content" 

});

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

于 2013-05-01T08:30:49.787 回答
57

那么你为什么不直接设置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 });

您正在初始化手风琴，然后向其添加更多选项。你为什么这样做？默认值为autoHeightis true，因此每个选项卡都有一个固定的高度。一次调用所有选项：

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



编辑

关于您的第二条评论：

看看http://jqueryui.com/demos/accordion/#option-header。您可以看到该选项h3是默认设置的，因此您不必在通话中进行设置。

你在这里得到了你的问题的答案：JQuery 手风琴在没有 h3 标签的情况下无法工作。

通过 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 回答
0

如果到目前为止没有任何效果，只需调整 jQuery Accordion 的大小contentElement- 默认情况下会调用它data-content，除非您以不同的方式配置它：

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

如果您想在动态加载数据后调整 Accordion 的大小，这也将起作用。

于 2017-06-30T12:47:20.100 回答