js-移动端可折叠，可左滑删除_js手机端折叠-CSDN博客

本文链接：https://blog.csdn.net/lm1022/article/details/78095232

先上静态截图（此处用到Bootstarp）：

1、展开效果截图：
这里写图片描述

2、折叠及左滑删除效果截图：
这里写图片描述

HTML部分：

<body>
<div class="btn_group_top ">
    <button class="btn btn-default pull-right delalloword_btn"  type="submit">全部清空</button>
</div>
<div class="container">
    <div class="word">
        <h3>ToDo</h3>
        <div class="accordion" id="accordion2">

            <div class="wrong_word_detail">
            <div class="line-wrapper accordion-group">
                <div class="wrong_word line-normal-wrapper" >
                    study
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse1" >
                    <span class="arrow pull-right"><span class="arrow-down"></span></span>
                </a>
                    <button class="btn-del">删除</button>
                </div>
            </div>
            <div id="collapse1" class="accordion-body collapse" >
                <div class="accordion-inner">
                    <p>努力学习，天天向上</p>
                </div>
            </div>
            </div>

            <div class="wrong_word_detail">
                <div class="line-wrapper accordion-group">
                    <div class="wrong_word line-normal-wrapper" >
                        work
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse2" >
                            <span class="arrow pull-right"><span class="arrow-down"></span></span>
                        </a>
                        <button class="btn-del">删除</button>
                    </div>
                </div>
                <div id="collapse2" class="accordion-body collapse" >
                    <div class="accordion-inner">
                        <p>好好工作，天天向上</p>
                    </div>
                </div>
            </div>
    </div>
    </div>
</div>
</body>

CSS部分：

body{
        background: #efefef;
        font-family: "微软雅黑";
    }
    /*全部清空*/
    .btn_group_top{
        margin: 0 auto;
        padding: 15% 5% 4% 5%;
    }
    .delalloword_btn{
        width: 35%;
        background-color:#9aabf3;
        color: white;
        font-size: 1.5rem;
        padding:2%;
        letter-spacing: 3px;
    }

    /*内容展示*/
    .word{
        width: 100%;
        min-height:400px;
        background: #fff;
        margin:0 auto;
        margin-top:10%;
        border-radius: 5px;
    }
    .word h3{
        text-align: center;
        color: #f17264;
        font-weight:bold;
        font-size:2rem;
        letter-spacing:2px;
        padding:8%;
        margin: 0;

    }
    .accordion{
        height:400px;
        overflow-y: auto;
    }
    .accordion-group{
        min-height: 50px;
        overflow: auto;
        border-bottom: 1px  solid #cfcfcf;
    }
    .wrong_word{
        color: #93cef3;
        font-size: 1.6rem;
        line-height:40px;
        padding-left: 5%;
        height: 40px;
    }
    .wrong_word span{
        color: #7B7B7B;
    }
    .arrow-down{
    background: url(./images/arrow-down.png) no-repeat;

    }
    .arrow-up{
        background: url(./images/arrow-up.png) no-repeat;
    }
    .arrow-down,.arrow-up{
        display: inline-block;
        position: relative;
        top:8px;right:105px;
        padding-bottom: 20px;
        width:15px;
        height:7px;
    }
    .accordion{
        width: 100%;
        overflow-x: hidden;
    }
    .accordion-inner p{
        font-size: 1.2rem;
        width: 300px;
        margin: 4%;
    }

    /*如果手机宽度小于 320 */
    @media screen and (max-width: 320px) {
        .accordion-inner p{
            width: 250px;
        }
        .accordion{
            height:300px;
            overflow-y: auto;
        }
        .wrong_word{
            width:350px;
        }
    }
    /*如果手机宽度大于400 */
    @media screen and (min-width: 414px) {
        .accordion-inner p{
            width: 300px;
        }
        .accordion{
            height:450px;
            overflow-y: auto;
        }
    }

    /*左滑动*/
    .line-wrapper {
        min-height: 50px;
        width: 400px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    @media screen and (min-width: 412px) {
        .line-wrapper{
            width: 438px;
        }
    }
    @media screen and (max-width: 360px) {
        .line-wrapper{
            width: 388px;
        }
    }
    /*ipad  ipad pro iphone 5*/
    @media screen and (min-width:760px) {
        .line-wrapper{
            width: 755px;
        }
    }
    @media screen and (min-width:1024px) {
        .line-wrapper{
            width: 980px;
        }
    }
    @media screen and (max-width: 320px) {
        .line-wrapper{
            width: 350px;
        }
    }

    .line-scroll-wrapper {
        position: relative;
        height:50px;
        width: 500px;
    }

    button.btn-del {
        float: right;
        width: 60px;
        height:50px;
        background-color: #f24f33;
        border: none;
        padding: 0;
        font-size: 1.2rem;
        color: white;
    }

    .line-normal-wrapper{
        height:100%;
    }

JS部分（借鉴网上已有代码改写）：

 $(document).ready(function( ) {
        $('.btn-del').on('touchend', function(e) {
            e.preventDefault()
            $(this).parents('.wrong_word_detail').slideUp('fast', function() {
                $(this).remove();
            })
        });

        //全部清空按钮
        $(".delalloword_btn").click(function(){
            $(".accordion").remove();
        });
        //点击展开或折叠内容，箭头图标切换
        $(".arrow-down").click(function(){
            $(this).toggleClass("arrow-up");
            });
        // 设定每一行的宽度=屏幕宽度+按钮宽度
        $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".btn-delete").width());
        // 设定常规信息区域宽度=屏幕宽度
        $(".line-normal-wrapper").width($(".line-wrapper").width());
        // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
        $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);
        // 获取所有行，对每一行设置监听
        var lines = $(".line-normal-wrapper");
        var len = lines.length;
        var lastX, lastXForMobile;

        // 用于记录被按下的对象
        var pressedObj; // 当前左滑的对象
        var lastLeftObj; // 上一个左滑的对象
        // 用于记录按下的点
        var start;
        // 网页在移动端运行时的监听
        for (var i = 0; i < len; ++i) {
            lines[i].addEventListener('touchstart', function(e) {
                lastXForMobile = e.changedTouches[0].pageX;
                pressedObj = this; // 记录被按下的对象

                // 记录开始按下时的点
                var touches = event.touches[0];
                start = {
                    x: touches.pageX, // 横坐标
                    y: touches.pageY // 纵坐标
                };
            });

            lines[i].addEventListener('touchmove', function(e) {
                // 计算划动过程中x和y的变化量
                var touches = event.touches[0];
                delta = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };

                // 横向位移大于纵向位移，阻止纵向滚动
                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    event.preventDefault();
                }
            });

            lines[i].addEventListener('touchend', function(e) {
                if (lastLeftObj &&  pressedObj == lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                    $(lastLeftObj).animate({ marginLeft: "0" }, 250); // 右滑
                    lastLeftObj = null; // 清空上一个左滑的对象
                }
                var diffX = e.changedTouches[0].pageX - lastXForMobile;
                if (diffX < -150) {
                    $(pressedObj).animate({ marginLeft: "-60px" }, 250); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                    $(lastLeftObj).animate({ marginLeft: "0" }, 500); // 已经左滑状态的按钮右滑
                    lastLeftObj = pressedObj; // 记录上一个左滑的对象
                } else if (diffX > 150) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({ marginLeft: "0" }, 250); // 右滑
                        lastLeftObj = null; // 清空上一个左滑的对象
                    }
                }
            });
        }
   });