纯后端尝试写一个前端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>支持次数 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>

总结

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

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