分类目录 共计收录5717站; 资讯文章5042篇; 待审网站 7012站; 当月收录259站; 今日审核10站; 已收到0个打赏!
分类目录快审
软文外链发布
新浪博客群发
快审详情
快审qq
首页 > 教程收藏 > CSS教程

内容折叠代码

4.20.1 只打开一个,可以关闭

点击效果TGBat-lib网站目录

  • 标题+

  • 标题+

  • 标题+

鼠标经过效果TGBat-lib网站目录

  • 标题+

  • 标题+

  • 标题+

4.20.2 必须有一个打开

点击效果TGBat-lib网站目录

  • 标题-

    内容
    很多内容TGBat-lib网站目录

  • 标题+

  • 标题+

鼠标经过效果TGBat-lib网站目录

  • 标题-

    内容
    很多内容TGBat-lib网站目录

  • 标题+

  • 标题+

4.20.3 可打开多个

点击效果TGBat-lib网站目录

  • 标题+

  • 标题+

  • 标题+

鼠标经过效果TGBat-lib网站目录

  • 标题+

  • 标题+

  • 标题+


  • TGBat-lib网站目录

HTML代码TGBat-lib网站目录

<ul id="Huifold1" class="Huifold">TGBat-lib网站目录

  <li class="item">TGBat-lib网站目录

    <h4>标题<b>+</b></h4>TGBat-lib网站目录

    <div class="info"> 内容<br>很多内容 </div>TGBat-lib网站目录

  </li>TGBat-lib网站目录

  <li class="item">TGBat-lib网站目录

    <h4>标题<b>+</b></h4>TGBat-lib网站目录

    <div class="info"><img src="pic/2.png" ></div>TGBat-lib网站目录

  </li>TGBat-lib网站目录

  <li class="item">TGBat-lib网站目录

    <h4>标题<b>+</b></h4>TGBat-lib网站目录

    <div class="info"><img src="pic/1.png" ></div>TGBat-lib网站目录

  </li>TGBat-lib网站目录

</ul>TGBat-lib网站目录

CSS代码TGBat-lib网站目录

.Huifold .item{ position:relative}TGBat-lib网站目录

.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}TGBat-lib网站目录

.Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}TGBat-lib网站目录

.Huifold .item .info{display:none;padding:10px}TGBat-lib网站目录

可根据自己的需求对css进行修改TGBat-lib网站目录


TGBat-lib网站目录

JS代码TGBat-lib网站目录

引入jQueryTGBat-lib网站目录


TGBat-lib网站目录

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>TGBat-lib网站目录

jQuery.Huifold = function(obj,obj_c,speed,obj_type,Event){TGBat-lib网站目录

if(obj_type == 2){TGBat-lib网站目录

$(obj+":first").find("b").html("-");TGBat-lib网站目录

$(obj_c+":first").show();TGBat-lib网站目录

}TGBat-lib网站目录

$(obj).bind(Event,function(){TGBat-lib网站目录

if($(this).next().is(":visible")){TGBat-lib网站目录

if(obj_type == 2){TGBat-lib网站目录

return false;TGBat-lib网站目录

}TGBat-lib网站目录

else{TGBat-lib网站目录

$(this).next().slideUp(speed).end().removeClass("selected");TGBat-lib网站目录

$(this).find("b").html("+");TGBat-lib网站目录

}TGBat-lib网站目录

}TGBat-lib网站目录

else{TGBat-lib网站目录

if(obj_type == 3){TGBat-lib网站目录

$(this).next().slideDown(speed).end().addClass("selected");TGBat-lib网站目录

$(this).find("b").html("-");TGBat-lib网站目录

}else{TGBat-lib网站目录

$(obj_c).slideUp(speed);TGBat-lib网站目录

$(obj).removeClass("selected");TGBat-lib网站目录

$(obj).find("b").html("+");TGBat-lib网站目录

$(this).next().slideDown(speed).end().addClass("selected");TGBat-lib网站目录

$(this).find("b").html("-");TGBat-lib网站目录

}TGBat-lib网站目录

}TGBat-lib网站目录

});TGBat-lib网站目录

}TGBat-lib网站目录

注意: 如果页面中引用了h-ui.js,无需重复粘贴上面脚本代码。TGBat-lib网站目录


TGBat-lib网站目录

调用代码:TGBat-lib网站目录


TGBat-lib网站目录

$(function(){TGBat-lib网站目录

$.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",1,"click"); /*5个参数顺序不可打乱,分别是:相应区,隐藏显示的内容,速度,类型,事件*/TGBat-lib网站目录

});TGBat-lib网站目录

三种类型:分别对应的参数:TGBat-lib网站目录


TGBat-lib网站目录

1只打开一个,可以全部关闭TGBat-lib网站目录

2必须有一个打开TGBat-lib网站目录

3可打开多个TGBat-lib网站目录


TGBat-lib网站目录

此文由 at-lib网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->