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 默认展开的数组下标