slideToggle+slideup實現手機端摺疊菜單效果

摺疊菜單的效果，網上有不少的插件，好比bootstrap的 Collapse ，很好用也很簡單，可是若是你使用的不是bootstrap框架，就會形成不少沒必要要的麻煩，好比默認樣式被修改，代碼冗餘等等，通常網上也有不少基於jQuery的插件，可是也都過於繁瑣，今天我就給你們說下，使用jQuery自帶的函數，實現這種效果，話很少少，直接上代碼和效果：

效果以下：

HTML部分：

<div class="box">
    <!-- 內容-->
    <ul class="inner">
        <li class="inner_title">綠色校園<span></span></li>
        <ol class="inner_style">
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
        </ol>
        <li class="inner_title">綠色校園<span></span></li>
        <ol class="inner_style">
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
        </ol>
        <li class="inner_title">綠色校園<span></span></li>
        <ol class="inner_style">
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
            <li>籃球場</li>
        </ol>
    </ul>
</div>

CSS部分：

<style>
    body{
        background: #dddddd;
    }
   .inner{
        background: #fff;
        width: 100%;
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
    }
   .inner .inner_title{
        background-color: #fff;
        width: 100%;
        padding: 0 2.5%;
        border-bottom: 1px solid #efefef;
        color: #343434;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: relative;
   }
   .inner .inner_title span{
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        right: 6%;
        background: url("images/arow_left.png") no-repeat center;
   }
   .inner .inner_title.active{
        color: #4db780;
   }
   .inner .inner_title.active span{
        background: url("images/arow_down.png") no-repeat center;
    }
    /*彈出的二級分類處理*/
   .inner  .inner_style{
        margin: 0;
        list-style: none;
        width: 100%;
        background-color: #efefef;
        overflow: hidden;
        padding: 15px 3%;
   }
   .inner  .inner_style li{
        float: left;
        color: #333;
        font-size: 14px;
        width: 21%;
        text-align: center;
        line-height: 30px;
        margin-right: 5%;
   }
</style>

js部分(記得引入jQuery)：
<script>

/**處理摺疊效果**/
(function ($) {
    $.fn.Fold = function (options) {
        //默認參數設置
        var settings = {
            speed: 300 //摺疊速度(值越大越慢)
        }
        //不爲空則合併參數
        if (options)
            $.extend(settings, options);

        //遵循鏈式原則
        return this.each(function () {
            //爲每一個li元素綁定點擊事件
            $("> li", this).each(function () {
                $(this).bind("click", function () {
                    //單擊以前先判斷當前菜單是否摺疊
                    if($(this).hasClass('active')){//摺疊狀態
                        $(".inner ol").slideUp('500');//使用slideup()摺疊其餘選項
                        $(this).removeClass('active');//移除選中樣式
                    }else{//打開狀態
                        $(this).siblings('li').removeClass('active');
                        $(".inner ol").slideUp('500');//使用slideup()摺疊其餘選項
                        $(this).addClass('active')//添加選中樣式
                        $(this).next("ol").slideToggle(settings.speed);
                    }
                });
            });
            //默認摺疊
            $("> ol", this).hide();
        });
    }
})(jQuery);
$(".inner").Fold();//調用

</script>