SlideMenu(老版本QQ好友分组列表样式)

<!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>

相关阅读:
【Git】rebase 用法小结(转)
修饰符访问权限。
throws与throw关键字。
多线程，同步代码块。
多线程，设置线程的优先级。
多线程，加入线程。
多线程，守护线程。
多线程，休眠线程。
多线程，获取当前线程的对象。
多线程获取名字和设置名字。
原文地址：https://www.cnblogs.com/CoderWayne/p/5680647.html