二级菜单，竖向点击下拉

最新推荐文章于 2024-10-01 20:12:28 发布

崽崽有点笨

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量72

点赞数

文章标签： javascript 前端 Powered by 金山文档

原文链接：https://blog.csdn.net/Fantasc/article/details/119820507?ops_request_misc=&request_id=&biz_id=102&utm_term=js%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-8-119820507.142^v73^control,201

版权

原文在：https://blog.csdn.net/Fantasc/article/details/119820507?ops_request_misc=&request_id=&biz_id=102&utm_term=js%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-8-119820507.142^v73^control,201^v4^add_ask,239^v2^insert_chatgpt&spm=1018.2226.3001.4187这里

我这里只是自己看方便而已


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/ermenu.css"/> -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a,
        img {
            border: 0;
            text-decoration: none;
        }

        /* @charset "utf-8"; */

        .ermenu {
            width: 150px;
            margin: 0 auto;
            font-size: 12px;
            padding-bottom: 10px;
            color: white;
            background-color: rgb(210, 231, 231);
            border-radius: 8px 8px 0 0;
        }

        .ermenu div {
            overflow: hidden;
        }

        .ermenu div .collapsed {
            height: 25px;
        }

        .collapsed {
            height: 25px;
        }

        .ermenu div span {
            width: 150px;
            height: 15px;
            padding: 5px 0;
            font-size: 14px;
            font-weight: bold;
            line-height: 15px;
            display: block;
            background-color: rgb(53, 48, 48);
        }

        .ermenu div:first-child {
            border-radius: 8px 8px 0 0;
        }

        .ermenu div a {
            width: 150px;
            display: block;
            text-align: center;
            padding: 3px 0;
            font-weight: bold;
            color: rgb(7, 107, 65);
        }
    </style>
    <script type="text/javascript">
        //封装函数获取任意元素的任意样式，obj:元素名，name:样式名
        function getStyle(obj, name) {
            if (window.getComputedStyle) {
                return getComputedStyle(obj, null)[name];
            } else {
                return obj.currentStyle[name];
            }
        }
        //应为函数在window.onload之外，所以要在次数声明定时器的标识
        //将定时器的标识定义在全局变量中会带来不必要的麻烦，要让元素控制自己的定时器
        // var timer;
        /* 
            创建可以简单移动的函数
                obj；要执行动画的对象
                attr；要执行动画的样式
                target：执行动画的目标位置
                speed：移动速度
                callback：回调函数，在动画执行完毕后执行
        */
        function divMove(obj, attr, target, speed, callback) {
            clearInterval(obj.timer);
            //判断速度的正负,如果目标位置的值大于当前位置，则不管，如果小于道歉位置的值，则对速度取反
            var current = parseInt(getStyle(obj, "left"));
            if (current > target) {
                speed = -speed;
            }
            obj.timer = setInterval(function () {
                //获取box原来的left值
                var oldVal = parseInt(getStyle(obj, attr));
                //在旧值的基础上增加
                var newVal = oldVal + speed;
                //判断移动方向及目标值的位置
                if ((speed < 0 && newVal < target) || (speed > 0 && newVal > target)) {
                    newVal = target;
                }
                //将newVal赋值给box的对应样式
                obj.style[attr] = newVal + "px";
                //让div在移动到500px处停下

                if (newVal == target) {
                    clearInterval(obj.timer);
                    callback();
                }
            }, 50);
        }

        // ---------------------------------------------------------------------------------------------

        /* 
            定义一个函数，用来向一个元素中添加指定的class属性值

            参数：
                - obj 要添加的class属性名
                - cn 
        */
        function addClass(obj, cn) {
            if (!check(obj, cn)) {
                obj.className += " " + cn;
            }
        }
        //判断一个元素中是否有指定的class属性值
        function check(obj, cn) {
            //使用正则表达式的方式，就将字面量写死了，不便修改
            // var reg = /\bb2\b/;//\b表示单词边界，

            //通过构造函数来
            var reg = new RegExp("\\b" + cn + "\\b");

            return reg.test(obj.className);
        }
        function removeClass(obj, cn) {
            //创建正则表达式
            var reg = new RegExp("\\b" + cn + "\\b");
            //删除class
            obj.className = obj.className.replace(reg, "");
        }

        /* 
            toggleClass可以用来切换一个类
            有相应的类，则删除，没有相应的类，则加上
        */
        function toggleClass(obj, cn) {
            //判断obj里面是否有cn
            if (check(obj, cn)) {
                removeClass(obj, cn);
            } else {
                addClass(obj, cn);
            }
        }

    </script>
    <script type="text/javascript">
        window.onload = function () {
            //使用类选择器来获取所有类为menuSpan的元素
            var menuSpan = document.querySelectorAll(".menuSpan");
            //定义变量来保存当前打开的菜单，因为默认的第一个span的div是展开的，所以这里获取的是第一个span的父元素div
            var openedDiv = menuSpan[0].parentNode;
            // alert(menuSpan.length);
            for (var i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick = function () {
                    // alert("绑定成功");
                    //需要操作的div，即当前点击的span的父元素div
                    var parentDiv = this.parentNode;
                    //如果元素已经有collapsed类，则不管，没有则为其加上collapsed类
                    toggleClass(parentDiv, "collapsed");
                    //如果openedDiv已经有了collapsed类，则不进入判断，从而下一额toggleClass()只有添加collapsed类的功能呢
                    if (openedDiv != parentDiv && !check(openedDiv, "collapsed")) {
                        // addClass(openedDiv,"collapsed");
                        toggleClass(openedDiv, "collapsed");//只希望其有添加类的功能
                    }
                    openedDiv = parentDiv;//将当次点击的这个span的父元素div赋值给opendiv。
                };
            }
        };
    </script>
</head>

<body>
    <div id="myc" class="ermenu">
        <div class="collapsed">
            <span class="menuSpan">公司介绍</span>
            <a href="#">人事部门</a>
            <a href="#">开发部门</a>
            <a href="#">管理层</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">关于我们</span>
            <a href="#">练习我们</a>
            <a href="#">客服</a>
            <a href="#">产品介绍</a>
            <a href="#">使用说明</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">售后服务</span>
            <a href="#">质量检测</a>
            <a href="#">破损报销</a>
            <a href="#">售后</a>
            <a href="#">人工</a>
        </div>
    </div>
</body>

</html>