jQuery手风琴自动高度问题 [英] JQuery Accordion Auto Height issue

问题描述

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

发生的情况是，自动高度"加载需要一些时间，在加载之前，内容下方有很多空白.最终加载时，高度将扩展到更长，然后捕捉到内容的正确高度.有没有办法使之无缝?我只希望能够单击手风琴"选项卡并将其平滑扩展到内容的确切高度.

更新2014年8月8日:

如果您使用的是版本1.9及更高版本，请使用heightStyle: "content" (塔伦的答案)

将autoHeight: false用于 1.8及更低版本(iappwebdev的答案)

解决方案

那么为什么不将autoheight设置为false?

$( ".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-标头.您可以看到默认情况下设置了h3选项，因此您不必在通话中对其进行设置.

您在这里得到问题的答案: JQuery手风琴没有无需h3标签即可工作.

通过jQuery API来提高您的知识非常重要.对于jQuery API，请访问 http://api.jquery.com/；对于jQuery UI，请访问 http://jqueryui.com/demos/.如果您还有其他问题，请在尝试解决问题后之后，并在进行研究后之后.

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

I am using JQuery Accordion. I have this page here: 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.

Update 08/08/2014:

Use heightStyle: "content" if you're using version 1.9 and higher (Tarun's answer)

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

解决方案

So why don't you just set autoheight to false?

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

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

EDIT

Looking at your comment:

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

You are initialising the accordion and then you add more options to it. Why are you doing that? Default value for autoHeight is true, so every tab gets a fixed height. Put all options in one call:

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

EDIT

Regarding your 2nd comment:

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.

And you get an answer to your question here: JQuery accordion doesn't work without h3 tags.

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 after you tried to resolve your problem and after you did some research.

If all this answered your question, please mark it as correct answer.

这篇关于jQuery手风琴自动高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！