javascript menu automatically hide after 5 seconds demo

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 ~

Guess you like

Origin www.cnblogs.com/dch0/p/12123647.html