javascript 5秒后自动隐藏菜单demo

Posted dch0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 5秒后自动隐藏菜单demo相关的知识，希望对你有一定的参考价值。

来码！

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #conttainer {
                width: 300px;
                height: 300px;
                background-color: beige;
            }
            #menu {
                height: 50px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div id="conttainer">
            <div id="menu">菜单栏</div>
            点击黄色区域弹出或隐藏菜单栏
        </div>
        <script>
            var menu = document.getElementById("menu");
            var conttainer = document.getElementById("conttainer");
            var menustatus = "show";//菜单栏显示状态
            
            function openmenu(){
                menustatus = "show";
                menu.style="display:block";
            }
            function closemenu(){
                menustatus = "hidden";
                menu.style="display:none";
            }
            
            //5s后隐藏
            function aotoclose(){
                return setTimeout(function(){
            　　　　//关闭的代码
           　　 　　if(menustatus == "show"){
                　　　　closemenu();//关闭操作
            　　　　}
            　　},5000);
            }
            //点击关闭或显示
            conttainer.onclick = function(){
                if(menustatus == "show"){
                    //菜单为显示状态,立即关闭
                    //1.取消定时器  2.关闭操作
                    clearTimeout(timer_fbg);
                    closemenu();//关闭操作
                }else{
                    //菜单为关闭状态
                    //2.开启定时器,打开操作
                    timer_fbg  = setTimeout(function(){
                    //关闭的代码
                    if(menustatus == "show"){
                        closemenu();//关闭操作
                    }
                    },5000);
                    openmenu();
                }
            }
            var timer_fbg  = aotoclose();//自动隐藏
        </script>
    </body>
</html>

 

直接复制代码运行就可以看到运行结果哦~

以上是关于javascript 5秒后自动隐藏菜单demo的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 在每个 cookie 5 秒后隐藏 div 加载

javascript实现下拉菜单的显示与隐藏

1秒后自动隐藏VueJS中的元素

javascript鼠标移入移出事件

这个表单自动填充javascript有啥问题？

demo3---定位菜单