To code!
<!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" > menu bar </ div > Click the yellow zone eject or hides the menu bar </ div > < Script > var MENU = document.getElementById ( " MENU " ); var conttainer = document.getElementById ( "conttainer" ); Var menustatus = " Show " ; // menu bar display state function openmenu () { menustatus = " Show " ; menu.style = " the display: Block " ; } function closemenu () { menustatus = " hidden " ; MENU .style = " Run the display: none " ; } // after 5s Hide function aotoclose () { return the setTimeout ( function () { // Close code IF (menustatus == " Show " ) { closemenu (); // Close Operation } }, 5000 ); } // click off or display conttainer. the onclick = function () { IF (menustatus == " Show " ) { // menu display state, immediately closed //1. 2. Close cancel the timer operation of the clearTimeout (timer_fbg); closemenu (); // Close Operation } the else { // menu OFF state @ 2 starts a timer, the opening operation timer_fbg = the setTimeout ( function () { / / off code IF (menustatus == " Show " ) { closemenu (); // Close operation } }, 5000 ); openmenu (); } } Var timer_fbg = aotoclose (); // automatically hide </ Script > </ body > </ HTML >
You can copy the code to run directly see the results oh ~