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>

效果如下：

分享不易，记得点赞！

转载于:https://www.cnblogs.com/gyxy/p/6902624.html

• 点赞
• 收藏
• 分享
• 文章举报