来码！
<!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>
直接复制代码运行就可以看到运行结果哦~