纯后端尝试写一个前端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(images/arrow_up.png) no-repeat center center;
31         }
32         .arrow-down{
33             background: url(images/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>

总结

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

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

转载于:https://www.cnblogs.com/yezhu008/p/5579483.html