折叠
文章转载，请注明出处 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 | 默认展开的数组下标 |