实现菜单下拉伸展折叠效果demo

最新推荐文章于 2024-07-10 22:29:37 发布

weixin_33905756

最新推荐文章于 2024-07-10 22:29:37 发布

阅读量980

点赞数

文章标签：游戏

原文链接：https://segmentfault.com/a/1190000017365725

版权

背景：帮后台做的一个下拉效果，原来的在手机上点击反应很慢，而且没必要加载那么多js，索性就用原生js实现了。

这是折叠的状态。

图片描述

这是展开状态，中间有个拉开过度的效果，同一时间只能有一个展开。

图片描述

点击查看效果
html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @charset "utf-8";

        body {
            margin: 0;
            padding: 0
        }

        body {
            font-family: "PingFang-SC-Bold", "Helvetica Neue", Helvetica, Arial, "PingFang SC Regular", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            overflow-x: hidden;
            line-height: 1.5;
            font-size: 15px;
            color: #333;
        }

        img {
            font-size: 0;
            line-height: 0;
            border: 0;
            vertical-align: middle
        }

        * {
            outline: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }

        .head {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
            padding: 10px 15px;
            border-bottom: 0;
            cursor: pointer;
        }

        .head img {
            float: right;
            width: 14px;
            margin-top: 6px;
        }

        .item {
            margin-bottom: 0;
            border-radius: 4px;
            background-color: #fff;
            border: 1px solid transparent;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            border-color: #ddd;
        }

        .item+.item {
            margin-top: 5px;
        }

        .ctx .p1 {
            font-weight: 700;
        }

        .hide {
            display: none;
        }

        .content {
            overflow: hidden;
            padding: 15px;
            border-top: 1px solid #ddd;
            font-size: 12px;
        }

        .ctx {
            overflow: hidden;
            height: 0;
            transition: height 0.3s ease;
            -webkit-transition: height 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="item">
            <div class="head">积分 <img src="https://img-blog.csdnimg.cn/2022010611382875682.png"
                    alt=""> </div>
            <div class="ctx showonce" num=0 open=1>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="head">金币 <img src="https://img-blog.csdnimg.cn/2022010611382882376.png"
                    alt=""></div>
            <div class="ctx hide" num=1 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="head">用户账号 <img src="https://img-blog.csdnimg.cn/2022010611382882376.png"
                    alt=""></div>
            <div class="ctx hide" num=2 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>

            </div>
        </div>
        <div class="item">
            <div class="head">礼物 <img src="https://img-blog.csdnimg.cn/2022010611382882376.png"
                    alt=""></div>
            <div class="ctx hide" num=3 open=0>
                <div class="content">
                    <p class="p1">一、账号被锁定</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                    <p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
                </div>

            </div>
        </div>
    </div>
    <script>
        var head = document.querySelectorAll('.head');
        var ctx = document.querySelectorAll('.ctx');
        var h = 0,
            c_h, i = 0,
            index, classNames,
            num = 0;
        var transitions = {
            'transition': 'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
        }
        //给有高度的元素初始化height;
        var show = document.querySelector('.showonce');
        var show_h = show.querySelector('.content').clientHeight
        show.style.height = show_h + 'px';
        // 给每个ctx监听动画结束事件
        for (var key in transitions) {
            for (var i = 0, l = ctx.length; i < l; i++) {
                ctx[i].addEventListener(transitions[key], function () {
                    if (this.getAttribute('open') == '0') {
                        this.setAttribute('class', 'ctx hide');
                    }
                })
            }
        }

        for (var i = 0; i < head.length; i++) {
            head[i].addEventListener('click', function () {
                index = this.nextElementSibling.getAttribute('num');
                for (var j = 0, l = ctx.length; j < l; j++) {
                    if ((ctx[j].getAttribute('num') == index) && (ctx[j].getAttribute('class').indexOf('hide') !=
                            -1)) {
                        ctx[j].setAttribute("open", "1");
                        ctx[j].setAttribute('class', 'ctx');
                        c_h = ctx[j].querySelector('.content').clientHeight;
                        this.querySelector('img').setAttribute('src',
                            'https://img-blog.csdnimg.cn/2022010611382875682.png'
                        )
                        ctx[j].style.height = c_h + 'px';
                    } else {
                        ctx[j].setAttribute("open", "0")
                        ctx[j].previousElementSibling.querySelector("img").setAttribute('src',
                            'https://img-blog.csdnimg.cn/2022010611382882376.png'
                        )
                        ctx[j].style.height = 0;
                    }
                }
            })
        }
    </script>
</body>

</html>

weixin_33905756

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现菜单下拉伸展折叠效果demo

背景：帮后台做的一个下拉效果，原来的在手机上点击反应很慢，而且没必要加载那么多js，索性就用原生js实现了。这是折叠的状态。这是展开状态，中间有个拉开过度的效果，同一时间只能有一个展开。点击查看效果html代码如下<!DOCTYPE html><html lang="en"><head&gt...
复制链接

扫一扫

实现菜单下拉伸展折叠效果demo

“相关推荐”对你有帮助么？