纯后端尝试写一个前端slide插件

转载

胡雨生 2017-05-14 16:29:29

文章标签 手机笑话效果图项目组 文章分类 网络安全

概述

由于项目组前端人员缺失，又赶上需要在手机端做一个slide效果的页面，所以只能自己硬着头皮上了，写的很简单，请大家不要笑话，只是拿出来分享下，大家先看下完成后的效果，如下：

纯后端尝试写一个前端slide插件_手机

过程

看了效果图是不是很简单，确实很简单了，下面我就贴下代码，请大家忍住别笑。

Html

 1 <div class="side-wrapper"> 2             <div class="side-row"> 3                 <div class="side-title"> 4                     <span class="side-title-des">测试数据一</span> 5                     <span class="side-arrow arrow-down"></span> 6                 </div> 7                 <div class="side-body information" style="display: none;"> 8                     <ul> 9                         <li>10                             <h4>前端是一门很复杂的学科</h4>11                             <p>支持次数 2</p>12                         </li>13                     </ul>14                 </div>15             </div>16             <div class="side-row">17                 <div class="side-title">18                     <span class="side-title-des">测试数据二</span>19                     <span class="side-arrow arrow-down"></span>20                 </div>21                 <div class="side-body information" style="display: none;">22                     <ul>23                         <li>24                             <h4>前端是一门很复杂的学科</h4>25                             <p>支持次数 2</p>26                         </li>27                     </ul>28                 </div>29             </div>30             <div class="side-row">31                 <div class="side-title">32                     <span class="side-title-des">测试数据三</span>33                     <span class="side-arrow arrow-down"></span>34                 </div>35                 <div class="side-body information" style="display: none;">36                     <ul>37                         <li>38                             <h4>前端是一门很复杂的学科</h4>39                             <p>支持次数 2</p>40                         </li>41                     </ul>42                 </div>43             </div>            
44         </div>

CSS

 1         html,body{ 2             margin: 0; 3             padding: :0; 4         } 5         .side-wrapper{ 6             margin: 0; 7             padding: 0; 8         } 9         .side-row{10             border-bottom: 1px solid #ddd;11         }12         .side-row .side-title{13             width: 100%;14             height: 35px;15             line-height: 35px;16             background: #f1f1f1;17             padding-left: 5px;18         }19         .side-title .side-title-des{20             font-family: 微软雅黑;21             font-size: 14px;22         }23         .side-title .side-arrow{24             width: 30px;25             height: 35px;26             float: right;27             28         }29         .arrow-up{30             background: url(p_w_picpaths/arrow_up.png) no-repeat center center;31         }32         .arrow-down{33             background: url(p_w_picpaths/arrow_down.png) no-repeat center center;34         }

JS

 1 <script type="text/javascript"> 2     $(".side-title").click(function(){ 3         var opened = $(this).hasClass("open"); 4         if(opened){ 5             //折起 6             $(this).removeClass("open"); 7             $(this).children("span.side-arrow").removeClass("arrow-up").addClass("arrow-down"); 8             $(this).parent().children(".side-body").slideUp(400); 9         }10         else{11             //展开12             //其他的先折起13             var $others = $(".side-title");14             $others.removeClass("open");15             $others.children("span.side-arrow").removeClass("arrow-up").addClass("arrow-down");16             $others.parent().children(".side-body").slideUp(400);17             //自身展开18             $(this).addClass("open");19             $(this).children("span.side-arrow").removeClass("arrow-down").addClass("arrow-up");20             $(this).parent().children(".side-body").slideDown(400);21         }22     });23 </script>