JQuery版本与accordion高度设置

最新推荐文章于 2023-04-08 08:17:18 发布

poppyCL

最新推荐文章于 2023-04-08 08:17:18 发布

阅读量586

点赞数

分类专栏： jquery 文章标签： jQuery accordion autoHeight heightStyle

本文链接：https://blog.youkuaiyun.com/poppyCL/article/details/103455110

版权

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在不同JQuery版本下如何设置Accordion组件的高度，包括1.8及以下版本的autoHeight设置为false，以及1.9及以上版本使用heightStyle：'content'。同时，解释了heightStyle属性的作用，它用于控制accordion及其每个panel的高度，并讨论了其默认值和使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、高度设置

1、JQuery版本1.8及以下
autoHeight: false

$("#component").accordion({
	collapsible: true,
	autoHeight: false,
	active:0
});

2、JQuery版本1.9及以上
heightStyle:'content’

$("#component").accordion({
	collapsible: true,
	heightStyle:'content',
	active:0
});

二、heightStyle

功能：控制accordion和每个panel的高度
类型：String
默认：“auto”

取值	含义
auto	All panels will be set to the height of the tallest panel. 所有面板将设置为最高面板的高度
fill	Expand to the available height based on the accordion’s parent height.根据手风琴父级组件的高将其扩展到可用高度
content	Each panel will be only as tall as its content.每个面板的高度仅取决于其内容

例子：
accordion初始化带有heightStyle选项：

$( ".selector" ).accordion({
	heightStyle: "fill"
});

初始化之后，获取/设定heightStyle：

// Getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// Setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );