4.20.1 只打开一个,可以关闭
点击效果
标题+
标题+
标题+
鼠标经过效果
标题+
标题+
标题+
4.20.2 必须有一个打开
点击效果
标题-
内容
很多内容标题+
标题+
鼠标经过效果
标题-
内容
很多内容标题+
标题+
4.20.3 可打开多个
点击效果
标题+
标题+
标题+
鼠标经过效果
标题+
标题+
标题+
HTML代码
<ul id="Huifold1" class="Huifold">
<li class="item">
<h4>标题<b>+</b></h4>
<div class="info"> 内容<br>很多内容 </div>
</li>
<li class="item">
<h4>标题<b>+</b></h4>
<div class="info"><img src="pic/2.png" ></div>
</li>
<li class="item">
<h4>标题<b>+</b></h4>
<div class="info"><img src="pic/1.png" ></div>
</li>
</ul>
CSS代码
.Huifold .item{ position:relative}
.Huifold .item h4{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}
.Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
.Huifold .item .info{display:none;padding:10px}
可根据自己的需求对css进行修改
JS代码
引入jQuery
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
jQuery.Huifold = function(obj,obj_c,speed,obj_type,Event){
if(obj_type == 2){
$(obj+":first").find("b").html("-");
$(obj_c+":first").show();
}
$(obj).bind(Event,function(){
if($(this).next().is(":visible")){
if(obj_type == 2){
return false;
}
else{
$(this).next().slideUp(speed).end().removeClass("selected");
$(this).find("b").html("+");
}
}
else{
if(obj_type == 3){
$(this).next().slideDown(speed).end().addClass("selected");
$(this).find("b").html("-");
}else{
$(obj_c).slideUp(speed);
$(obj).removeClass("selected");
$(obj).find("b").html("+");
$(this).next().slideDown(speed).end().addClass("selected");
$(this).find("b").html("-");
}
}
});
}
注意: 如果页面中引用了h-ui.js,无需重复粘贴上面脚本代码。
调用代码:
$(function(){
$.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",1,"click"); /*5个参数顺序不可打乱,分别是:相应区,隐藏显示的内容,速度,类型,事件*/
});
三种类型:分别对应的参数:
1只打开一个,可以全部关闭
2必须有一个打开
3可打开多个
此文由 at-lib网站目录 编辑,未经允许不得转载!: