纯后端尝试写一个前端slide插件
2016-06-13 09:19
495 查看
概述
由于项目组前端人员缺失,又赶上需要在手机端做一个slide效果的页面,所以只能自己硬着头皮上了,写的很简单,请大家不要笑话,只是拿出来分享下,大家先看下完成后的效果,如下:![](http://images2015.cnblogs.com/blog/921424/201606/921424-20160613090851495-1571387122.png)
过程
看了效果图是不是很简单,确实很简单了,下面我就贴下代码,请大家忍住别笑。Html
<div class="side-wrapper"> <div class="side-row"> <div class="side-title"> <span class="side-title-des">测试数据一</span> <span class="side-arrow arrow-down"></span> </div> <div class="side-body information" style="display: none;"> <ul> <li> <h4>前端是一门很复杂的学科</h4> <p>支持次数 2</p> </li> </ul> </div> </div> <div class="side-row"> <div class="side-title"> <span class="side-title-des">测试数据二</span> <span class="side-arrow arrow-down"></span> </div> <div class="side-body information" style="display: none;"> <ul> <li> <h4>前端是一门很复杂的学科</h4> <p>支持次数 2</p> </li> </ul> </div> </div> <div class="side-row"> <div class="side-title"> <span class="side-title-des">测试数据三</span> <span class="side-arrow arrow-down"></span> </div> <div class="side-body information" style="display: none;"> <ul> <li> <h4>前端是一门很复杂的学科</h4> <p>支持次数 2</p> </li> </ul> </div> </div> </div>
CSS
html,body{ margin: 0; padding: :0; } .side-wrapper{ margin: 0; padding: 0; } .side-row{ border-bottom: 1px solid #ddd; } .side-row .side-title{ width: 100%; height: 35px; line-height: 35px; background: #f1f1f1; padding-left: 5px; } .side-title .side-title-des{ font-family: 微软雅黑; font-size: 14px; } .side-title .side-arrow{ width: 30px; height: 35px; float: right; } .arrow-up{ background: url(images/arrow_up.png) no-repeat center center; } .arrow-down{ background: url(images/arrow_down.png) no-repeat center center; }
JS
<script type="text/javascript"> $(".side-title").click(function(){ var opened = $(this).hasClass("open"); if(opened){ //折起 $(this).removeClass("open"); $(this).children("span.side-arrow").removeClass("arrow-up").addClass("arrow-down"); $(this).parent().children(".side-body").slideUp(400); } else{ //展开 //其他的先折起 var $others = $(".side-title"); $others.removeClass("open"); $others.children("span.side-arrow").removeClass("arrow-up").addClass("arrow-down"); $others.parent().children(".side-body").slideUp(400); //自身展开 $(this).addClass("open"); $(this).children("span.side-arrow").removeClass("arrow-down").addClass("arrow-up"); $(this).parent().children(".side-body").slideDown(400); } }); </script>
总结
没有前端的时候只能后端顶上,写的不好的地方希望前端大神们能给一些指导意见。如果觉得写的还行的话,请肆意推荐哦,兴许推荐多了我会考虑转前端呢。
相关文章推荐
- HTML最新标准HTML5总结(必看)
- Behavior differences between S3 and Modern Standby
- 标准化命名CSS类,持续更新
- EL和JSTL的总结(一)
- angular中的ng-bind-html指令和$sce服务
- JS获取表单数据
- JavaScript_object基础入门(必看篇)
- class命名规范
- js 连续赋值的简单实现
- 全面解析Bootstrap中Carousel轮播的使用方法
- 全面解析Bootstrap中tooltip、popover的使用方法
- React Native:从入门到原理
- 对jS闭包的理解
- 跟着 8 张思维导图学习 Javascript
- JS设计模式之职责链模式
- TextView 显示html
- HTML学习三
- jquery 判断selection range 是否在容器中
- WEB编程的套路——简单好用的js函数(2)
- Ubuntu 安装最新版本的Node.js