<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SlideMenu</title> <style type="text/css"> #menuBox {width:150px; background-color:silver; text-align:center; border:solid 1px red;} </style> <script type="text/javascript"> function SlideMenu(itemHeight) { var self = this; this.index = 0; this.speed = 10; this.selectedIndex = 0; var lastItem; this.AddItem = function(caption,element) { if(this.index==this.selectedIndex) { itemHeight = 200; } else { itemHeight = 0; } var tmp = document.getElementById(element); //Title var titleDiv = document.createElement("DIV"); titleDiv.style.backgroundColor = "gray"; titleDiv.style.color = "white"; titleDiv.innerHTML = caption; titleDiv.style.width = "100%"; titleDiv.style.cursor = "pointer"; //Content var contentDiv = document.createElement("DIV"); contentDiv.id = "item"+this.index; contentDiv.style.backgroundColor = "#03487F"; contentDiv.style.overflow = "hidden"; contentDiv.appendChild(tmp); contentDiv.style.height = itemHeight+"px"; titleDiv.setAttribute("item",contentDiv.id); if(document.attachEvent) { titleDiv.attachEvent("onclick",ItemClick); } if(document.addEventListener) { titleDiv.addEventListener("click",ItemClick,false); } document.getElementById("menuBox").appendChild(titleDiv); document.getElementById("menuBox").appendChild(contentDiv); if(this.index==this.selectedIndex) { lastItem = contentDiv; } this.index += 1; } var ItemClick = function(evt) { var clickObj; if(document.attachEvent) { clickObj = window.event.srcElement; } else if(document.addEventListener) { clickObj = evt.target; } if(!flag) { return false; } var itemID = clickObj.getAttribute("item"); Slide(itemID); } var flag = true; Slide = function(objID) { var obj = document.getElementById(objID); if(parseInt(obj.style.height)<200) { flag = false; obj.style.height = (parseInt(obj.style.height)+self.speed)+"px"; if((parseInt(lastItem.style.height)-self.speed)<0) { lastItem.style.height = "0px"; } else { lastItem.style.height = (parseInt(lastItem.style.height)-self.speed)+"px"; } setTimeout("this.Slide('"+objID+"')",1); } else { flag = true; lastItem = obj; } } } </script> </head> <body> <input type="text" id="txt" style="200px;" /> <input type="button" id="btn" value="ClickMe" /> <select id="sel"><option>Football</option><option>Basketball</option></select> <div id="menuBox"></div> <input type="button" onclick="alert(document.getElementById('menuBox').innerHTML);" value="ShowDivContent" /> <script type="text/javascript"> var list = new SlideMenu(50); list.selectedIndex = 1; list.AddItem("标题一","txt"); list.AddItem("标题二","btn"); list.AddItem("标题三","sel"); </script> </body> </html>