純后端嘗試寫一個前端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>

總結

沒有前端的時候只能后端頂上，寫的不好的地方希望前端大神們能給一些指導意見。

如果覺得寫的還行的話，請肆意推薦哦，興許推薦多了我會考慮轉前端呢。