Simple example of JavaScript telescopic menu_javascript skills-JS Tutorial-php.cn

Copy code The code is as follows: Telescopic menu body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation > ul { list-style-type:none;/* Do not display bullet points*/ margin:0px; padding:0px; } #navigation > ul > li { border-bottom:1px solid #ED9F9F;/* Add underline*/ } #navigation > ul > li > a{ display:block;/* block display*/ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515;/* thick red edge on the left*/ border-right:1px solid #711515;/* shadow on the right*/ } #navigation > ul > li > a:link, #navigation > ul > li > a:visited{ background-color:#c11136; color:#FFFFFF; } # navigation > ul > li > a:hover{ /* When the mouse passes over */ background-color:#990020;/* Change the background color*/ color:#ffff00;/* Change the text color */ } /* CSS style of submenu*/ #navigation ul li ul{ list-style-type:none; margin:0px ; padding:0px 0px 0px 0px; } #navigation ul li ul li{ border-top:1px solid #ED9F9F; } #navigation ul li ul li a{ display:block; padding:3px 3px 3px 0.5em; text-decoration:none; border-left:28px solid #a71f1f; border-right:1px solid #711515; } #navigation ul li ul li a:link, #navigation ul li ul li a:visited{ background-color:#e85070; color:#FFFFFF; } #navigation ul li ul li a:hover{ background-color:#c2425d; color:#ffff00; } #navigation ul li ul.myHide{ /* Hide submenu*/ display:none; } #navigation ul li ul.myShow{ /* Show submenu*/ display:block; } -- > function change(){ //Through the parent element li, find the sibling element ul var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; //CSS is alternately replaced to realize display and concealment if(oSecondDiv.className == "myHide") oSecondDiv.className = " myShow"; else oSecondDiv.className = "myHide"; } window.onload = function(){ var oUl = document.getElementById("listUL"); var aLi = oUl.childNodes;//Child element var oA; for(var i=0;i //If the child element is li, and this li has submenu ul if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ oA = aLi[i].firstChild;/ /Find hyperlink oA.onclick = change;//Dynamicly add click function } } } Home News &lt ;a href="#">Lastest News All News Sports Basketball Football Volleyball &lt ;li> Weather Today's Weather&lt ;/a> Forecast Contact Me &lt ;/body>