jQuery.Huifold.js

已封装

H-ui.js 中已封装，无需单独下载。单独下载地址 jQuery.Huifold.js

jQuery.Huifold是一个用js编写的jQuery插件，实现折叠效果。

使用方法

1、jQuery.Huifold.js依赖jQuery或者zepto.js。

js调用

$("#Huifold-demo1").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:1,

trigger:'click',

className:"selected",

speed:"first",

});

$("#Huifold-demo2").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:2,

trigger:'click',

className:"selected",

speed:"first",

});

$("#Huifold-demo3").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:3,

trigger:'click',

className:"selected",

speed:"first",

openKeys: [0, 1]

});

$("#Huifold-demo4").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:1,

trigger:'mouseover',

className:"selected",

speed:"first",

});

$("#Huifold-demo5").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:2,

trigger:'mouseover',

className:"selected",

speed:"first",

});

$("#Huifold-demo6").Huifold({

item: '.item',

titCell:'h4',

mainCell:'.info',

type:3,

trigger:'mouseover',

className:"selected",

speed:"first",

});

demo效果

只打开一个，可以关闭

点击效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

鼠标经过效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

必须有一个打开

点击效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

鼠标经过效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

可打开多个

点击效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

鼠标经过效果

标题

+

内容

很多内容

标题

+

可以是图片

标题

+

相关参数

属性

默认值

描述

备注

titCell

'.item .Huifold-header'

触发区域

操作区

mainCell

'.item .Huifold-body'

主体区域

type

1

只打开一个，可以全部关闭

1 只打开一个，可以全部关闭;2 必须有一个打开;3 可打开多个

trigger

"click"

触发事件

"click" | "mouseover"

className

"selected"

折叠后添加样式

speed

"normal"

速度

"slow" | "normal" | "fast"

openKeys

默认展开的数组下标