jQuery.Huifold.js 已封装

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

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

使用方法

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

js调用

$("#Huifold-demo1").Huifold({
	titCell:'.item h4',
	mainCell:'.item .info',
	type:1,
	trigger:'click',
	className:"selected",
	speed:"first",
});

$("#Huifold-demo2").Huifold({
	titCell:'.item h4',
	mainCell:'.item .info',
	type:2,
	trigger:'click',
	className:"selected",
	speed:"first",
});

$("#Huifold-demo3").Huifold({
	titCell:'.item h4',
	mainCell:'.item .info',
	type:3,
	trigger:'click',
	className:"selected",
	speed:"first",
});

$("#Huifold-demo4").Huifold({
	titCell:'.item h4',
	mainCell:'.item .info',
	type:1,
	trigger:'mouseover',
	className:"selected",
	speed:"first",
});

$("#Huifold-demo5").Huifold({
	titCell:'.item h4',
	mainCell:'.item .info',
	type:2,
	trigger:'mouseover',
	className:"selected",
	speed:"first",
});

$("#Huifold-demo6").Huifold({
	titCell:'.item h4',
	mainCell:'.item .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"