点击按钮 “加载更多”效果
来源:互联网 发布:中国大数据信息 编辑:程序博客网 时间:2024/05/24 07:37
html部分
<div class="inner foot_cont" id="memorabilia"> <ul> <li class="clearfix new_fl"> <div> <h3>与公司签订协议</h3> <p>与网络科技有限公司签订投资入股协议,大愿网络科技注入资金 万。</p> <p>2017/01/08</p> </div> </li> <!-- 展开内容 --> <div class="out_part"> <li class="clearfix new_fr"> <div> <h3>受邀参加首届宁商大会暨第十一届企业家年会</h3> <p>作为里程碑式的事件,此次成功收官,为2017年乃至未来三年的发展奠定坚实基础。</p> <p>2016/12/15</p> </div> </li> <li class="clearfix new_fl"> <div> <h3>与 先生合影</h3> <p>上线后协助推广并呐喊助威!此次活动得到了粉丝团力量支持,注入形象宣传元素。</p> <p>2016/07/08</p> </div> </li> </div> </ul><br> <a href="javascript:void();" class="more">+ 更多</a> </div>
css部分
.foot_cont{margin-top:50px;width:95%;}.more{width:55%;height:50px;display:block;background:#656565;text-align:center;line-height:50px;color:#fff;font-size:20px;margin-bottom:50px;}.out_part{display:none;}
jq部分
$(function () { var more = $('.more'); //获取class类名 var txt = ['+ 更多', '^ 收起'], //自定义一个数组,放入文字字段 textStatus = true; //初始化功能 more.on('click', function (e) { //绑定class类名事件 做函数 e是做兼容浏览器用的,可以去掉 e.preventDefault(); $('.out_part').toggle(300, function () { //做类名的切换事件方法 more.text(txt[+textStatus]); //加号写在变量前面可以把变量的值转成数字(上边定义的数组里边 默认是按照数字排序的),放到那个more类名里。 textStatus = !textStatus; // 如果当前类名是那个值 就取反 }); }); })();
阅读全文
0 0
- 点击按钮 “加载更多”效果
- js点击按钮加载更多效果
- 点击按钮 加载更多
- ListView 点击 更多按钮 加载更多
- jq ajax 点击按钮异步加载更多
- Ajax 实现点击按钮加载更多
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
- 点击加载更多
- 微信小程序加载更多,点击查看更多
- jquery 实现点击加载更多
- Android ListView点击加载更多
- tableView - 点击加载更多(通知)
- 点击加载更多文章信息
- angularjs实现点击加载更多
- jquery列表点击加载更多
- 按钮点击(还原)效果
- 按钮点击效果
- 按钮点击效果不灵敏
- C# 更改系统时间
- FutureTask result的获取
- 常用无线局域网标准
- Node.js基本模块学习(二)
- 怎样实现同一个账户同一时间只能在一个终端登录
- 点击按钮 “加载更多”效果
- There's no Qt version assigned to this project for platform x64
- Xutils简单介绍
- 网络基础之协议-1
- java设计模式——迭代器模式
- 工厂方法模式
- 所谓IIS500内部服务器错误
- MyBatis动态SQL<choose>标签的使用
- Unity Leap Motion学习笔记