js-移动端可折叠，可左滑删除

来源：互联网发布：qt linux 编辑：程序博客网时间：2024/06/16 16:51

先上静态截图（此处用到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; // 清空上一个左滑的对象                    }                }            });        }   });

阅读全文

0 0