手风琴自动高度问题

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

What happens is the Auto Height is taking some time to load, before it loads there is a lot of white space below the content. When it finally does load the height will expand to longer then snap up to the correct height of the content. Is there a way for this to be seamless? I just want to be able to click an Accordion tab and have it expand smoothly to the exact height of the content.

2014年8月8日更新:

如果使用 1.9或以上版本，请使用 heightStyle: "content"(塔伦的答案)

Use autoHeight: false for 1.8 and lower (iappwebdev's answer)

93985 次浏览
小开
最佳答案

那为什么不把 autoheight设为 false 呢？

$( ".selector" ).accordion({ autoHeight: false });

Http://jqueryui.com/demos/accordion/#option-autoheight

EDIT

看看你的评论:

// 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
});



剪辑

关于你的第二条评论:

Have a look at http://jqueryui.com/demos/accordion/#option-header. You can see that option h3 is set by default, so you don't have to set it in your call.

你可以在这里得到问题的答案: 没有 h3标记，JQuery 手风琴就不能工作。

It's pretty important to go through jQuery API to improve your knowledge. For jQuery API go to http://api.jquery.com/ and for jQuery UI go to http://jqueryui.com/demos/. If you have any more questions, don't hesitate to ask 之后 you tried to resolve your problem and 之后 you did some research.

如果这些都回答了你的问题，请标记为正确答案。

小开

你应该用

$("#accordion").accordion({


heightStyle: "content"


});

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

小开

这招对我很管用。

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


heightStyle: "content"


});

这是工作在新的版本 对我很有效! ! ！

小开

If nothing works so far, just resize the jQuery Accordion contentElement - it is called data-content by default, unless you configured it differently:

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

This would also work if you want to resize the Accordion after your data is loaded dynamically.


提交答案