折叠
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
4.18.1 只打开一个,可以关闭
点击效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
鼠标经过效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
4.18.2 必须有一个打开
点击效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
鼠标经过效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
4.18.3 可打开多个
点击效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
鼠标经过效果
-
标题+
内容
很多内容 -
标题+
可以是图片 -
标题+
HTML
SCSS
CSS
JS
<ul id="Hui-fold1" class="hui-fold"> <li class="hui-fold-item"> <h4 class="hui-fold-header">标题<b>+</b></h4> <div class="hui-fold-content"> 内容<br>很多内容 </div> </li> <li class="hui-fold-item"> <h4 class="hui-fold-header">标题<b>+</b></h4> <div class="hui-fold-content"><img src="//images.h-ui.net/www/2.png" width="300" height="150"><br> 可以是图片</div> </li> <li class="hui-fold-item"> <h4 class="hui-fold-header">标题<b>+</b></h4> <div class="hui-fold-content"><img src="//images.h-ui.net/www/1.png" width="300" height="150"></div> </li> </ul>
.hui-fold { .hui-fold-item { position: relative; .hui-fold-header { margin: 0; font-weight: bold; position: relative; border-top: 1px solid #fff; font-size: 15px; line-height: 22px; padding: 7px 10px; background-color: #eee; cursor: pointer; padding-right: 30px; b { position: absolute; display: block; cursor: pointer; right: 10px; top: 7px; width: 16px; height: 16px; text-align: center; color: #666; } } .hui-fold-content { display: none; padding: 10px; } } }
.hui-fold .hui-fold-item { position: relative; } .hui-fold .hui-fold-item .hui-fold-header { margin: 0; font-weight: bold; position: relative; border-top: 1px solid #fff; font-size: 15px; line-height: 22px; padding: 7px 10px; background-color: #eee; cursor: pointer; padding-right: 30px; } .hui-fold .hui-fold-item .hui-fold-header b { position: absolute; display: block; cursor: pointer; right: 10px; top: 7px; width: 16px; height: 16px; text-align: center; color: #666; } .hui-fold .hui-fold-item .hui-fold-content { display: none; padding: 10px; }
$("#Hui-fold1").Huifold({ item: '.item', titCell:'h4', mainCell:'.info', type:1, trigger:'click', className:"selected", speed:"first", });
相关参数
属性 | 默认值 | 描述 | 备注 |
---|---|---|---|
item | '.hui-fold-item' | 触发区域 | 操作区 |
titCell | '.hui-fold-header' | 触发区域 | 操作区 |
mainCell | '.hui-fold-content' | 主体区域 | |
type | 1 | 只打开一个,可以全部关闭 | 1 只打开一个,可以全部关闭;2 必须有一个打开;3 可打开多个 |
trigger | "click" | 触发事件 | "click" | "mouseover" |
className | "selected" | 折叠后添加样式 | |
speed | "normal" | 速度 | "slow" | "normal" | "fast" |
openKeys | 默认展开的数组下标 |