前端二级菜单的制作出现的问题？-CSDN博客

本文链接：https://blog.csdn.net/weixin_73974152/article/details/135338425

在过程中，我发现我的二级菜单的过渡有问题，在我收缩的时候没有任何问题，但是在我打开的时候却出现了先出来文字再打开的情况，我想请教一下大神有没有解决办法？

出现的问题

这是出现问题的视频，代码在下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        body{
            font: 12px/180% Arial, Helvetica, sans-serif,"新宋体";
        }
        div#my_menu{
            width: 190px;
            margin: 50px auto;
            background-color: #D8D8D8;
        }
        a{
            display: block;
            text-decoration: none;
            padding: 3px;
            text-align: left;

        }
        a:hover{
            background-color: #555555;
            color: white;
        }
        div span{
            background-color: gray;
            color: white;
            display: block;
            overflow: hidden;
            height: 15px;
            line-height: 15px;
            padding: 5px 25px;
            font-weight: bold;
            border-bottom: 2px solid white;
        }
        div.sdmenu div.collapsed{
            height: 25px;
        }
        div.collapsed{
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            //获取所有
            //document.querSelectorAll是通过CSS选择器来进行获取所有元素的
            let menuSpan=document.querySelectorAll(".menuSpan");
            //默认设置第一个为打开的的菜单
            let openDiv=menuSpan[0].parentNode;
            for (let i = 0; i < menuSpan.length; i++) {
                menuSpan[i].onclick=function () {
                    //当前this表示的点击的span元素
                    let parent=this.parentNode;
                    //点击后打开了的关闭，没打开的话开启
                    //collapsed这个class类为关闭菜单（缩小高度）
                    toggleMenu(parent);
                   
                    //打开菜单后，应该关闭之前打开的菜单（openDiv就是之前打开的菜单）
                    if (openDiv != parent && !judgeClass(openDiv,"collapsed")) {
                        toggleMenu(openDiv);
                    }
                    //修改当前当前打开的菜单
                    openDiv = parent;
                }
            }
            function toggleMenu(obj) {
                let begain=obj.offsetHeight;
                toggleClass(obj,"collapsed");//必须切换一下我们才能知道高度
                //结束高度
                let end=obj.offsetHeight;
                //动画效果就是从begin->end过渡
                //将元素高度重置为begin
                obj.style.height=begain+"px";
                move(obj,end,10,"height",function () {
                    //动画执行完毕将内联样式删除
                    obj.style.height="";
                });
            }
            function addClass(obj,sty){
                if (!judgeClass(obj,sty)) {
                    //判断原本的元素中是否添加了这个class属性
                    obj.className +=" "+sty; //在原本已经存在的属性上添加,修改
                }
            }
            function judgeClass(obj, styles) {
                //judgeClass是用来判断添加的class是否添加过了的
                let sty=new RegExp("\\b"+styles+"\\b");
                //正则表达式中\b是用来检测一个字符是否是一个整体，在\b的地方有没有其他的字符（除了空格）
                return sty.test(obj.className);
            }
            function removeClass(obj, styles) {
                let sty=RegExp("\\s*\\b"+styles+"\\b");
                //用正则设置当前的当前的这个class存在的样式
                // \s表示空格,*表示多个,
                obj.className=obj.className.replace(sty,"");
                // obj.className=obj.className.replace(" ",""); //删除空格
                //用replace代替为空字符
            }
            function toggleClass(obj, styles) {
                //切换类：当我们当前类存在时删除，不存在时候添加
                if (judgeClass(obj,styles)){
                    removeClass(obj,styles);
                }else{
                    addClass(obj,styles);
                }
            }
            function move(obj,target,speed,styles,callback) {
                let space=parseInt(getComputedStyle(obj,null)[styles]);
                clearInterval(obj.times);//关闭上次点击后形成的计时器
                if (space>target){
                    speed = -speed;
                }
                obj.times=setInterval(function () {
                    let arr=parseInt(getComputedStyle(obj,null)[styles]);
                    let asr=arr+speed;//当前移动到的位置
                    if ((speed>0 && asr>target) ||(speed<0 && asr<target)){
                        asr=target;
                    }
                    obj.style[styles]=asr+"px"; //移动位置
                    if (asr==target){
                        //如果到达目标点就停止计时器并执行回调函数
                        clearInterval(obj.times);
                        callback &&callback();
                    }
                },50);
            }
        }
    </script>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#" >图像优化</a>
            <a href="#" >收藏夹图标生成器</a>
            <a href="#" >邮件</a>
            <a href="#" >htaccess密码</a>
            <a href="#" >梯度图像</a>
            <a href="#" >按钮生成器</a>
        </div>
        <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="#" >JavaScript工具包</a>
            <a href="#" >CSS驱动</a>
            <a href="#" >CodingFormus</a>
            <a href="#" >CSS例子</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <a href="#" >Current or not</a>
            <a href="#" >Current or not</a>
            <a href="#" >Current or not</a>
            <a href="#" >Current or not</a>
        </div>
    </div>
</body>
</html>