纯后端尝试写一个前端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;

         }

 <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>