点击按钮 “加载更多”效果
2017-05-20 15:09
218 查看
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; // 如果当前类名是那个值 就取反 }); }); })();
相关文章推荐
- js点击按钮加载更多效果
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
- 基于jQuery实现点击列表加载更多效果
- iOS -点击按钮查看大图,再次点击还原效果(此处以UITableViewCell为父视图,其中加载多个图片为例)
- Ajax 实现点击按钮加载更多
- 加载更多(点击按钮)
- jquery制作图片瀑布流点击按钮加载更多内容
- 织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
- jquery ajax() 404错误,406错误解决方案 遍历json数组 append到指定位置 ajax实现点击加载更多按钮
- iOS点击文字按钮变转圈加载效果
- 点击按钮 加载更多
- jq ajax 点击按钮异步加载更多
- jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo
- 默认只显示指定高度,出来按钮 阅读更多,加载全文,点击后显示全文的实现方式
- jQuery实现按钮点击遮罩加载及处理完后恢复的效果
- 通过更多、收起按钮点击展开数据效果
- jquery制作图片瀑布流点击按钮加载更多内容
- ListView 点击 更多按钮 加载更多
- button_press.xml 按钮点击/未点击 两个不同效果