JQuery手风琴自动高度问题

Kim*_*Kim 74 jquery accordion

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

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

2014年8月8日更新:

使用heightStyle: "content",如果你正在使用1.9版及更高版本(塔伦的答案)

使用autoHeight: false1.8和更低(iappwebdev的答案)

Tar*_*pta 157

你应该使用

$("#accordion").accordion({ 

heightStyle: "content" 

});
Run Code Online (Sandbox Code Playgroud)

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

  • 竖起大拇指.简单而简单,最好的,它的工作:) (8认同)
  • 谢谢你,试过`autoHeight:false` ......但没有,这就行了 (5认同)

iap*_*dev 56

那你为什么不设置autoheight为假?

$( ".selector" ).accordion({ autoHeight: false });
Run Code Online (Sandbox Code Playgroud)

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

编辑

看看你的评论:

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

您正在初始化手风琴,然后为其添加更多选项.你为什么这样做?autoHeightis的默认值true,因此每个选项卡都有一个固定的高度.将所有选项置于一个调用中:

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



编辑

关于你的第二条评论:

看看http://jqueryui.com/demos/accordion/#option-header.您可以看到h3默认情况下设置了该选项,因此您无需在通话中进行设置.

你在这里得到了一个问题的答案:没有h3标签,JQuery手风琴不起作用.

通过jQuery API来提高您的知识非常重要.有关jQuery API,请访问http://api.jquery.com/,有关jQuery UI,请访问http://jqueryui.com/demos/.如果您还有其他问题,请尝试解决问题以及进行一些研究不要犹豫.

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


mit*_*nda 14

$("#accordion").accordion({ 

heightStyle: "content" 

});
Run Code Online (Sandbox Code Playgroud)

这是在新版本工作,它为我工作!