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

概述

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

过程

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

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>支持次数 </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>支持次数 </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>支持次数 </p>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>

CSS

         html,body{
             margin:;
             padding: :0;
         }
         .side-wrapper{
             margin:;
             padding:;
         }
         .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>

总结

没有前端的时候只能后端顶上，写的不好的地方希望前端大神们能给一些指导意见。

如果觉得写的还行的话，请肆意推荐哦，兴许推荐多了我会考虑转前端呢。