折叠式菜单的简单实现

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script    type="text/javascript">
    function subClick(source)
    {
        var menu=document.getElementById("menu");
        var h3s=menu.getElementsByTagName("h3");
        var divs=menu.getElementsByTagName("div");    
        for(var i=0;i<h3s.length;i++)
        {
            if(source==h3s[i])
            {
                divs[i].style.display="block";
                h3s[i].style.background="Blue";
            }
            else
            {
                divs[i].style.display="";
                h3s[i].style.background="silver";    
            }
        }    
    }
</script>
<style type="text/css">
    #menu{width:300pt;}
    .submenu{ display:none;}
    #menu h3{width:auto;height:20pt; background:silver;}
</style>
</head>

<body>
    <div id="menu">
        <h3 onclick="return subClick(this);">menu1</h3>
        <div class="submenu">
            option1<br />
            option1<br />
            option1<br />
        </div>
        <h3 onclick="return subClick(this);">menu2</h3>
        <div class="submenu">
            option2<br />
            option2<br />
            option2<br />
        </div>
        <h3 onclick="return subClick(this);">menu3</h3>
        <div class="submenu">
            option3<br />
            option3<br />
            option3<br />
        </div>
    </div>
</body>
</html>
posted @ 2011-04-10 12:30  山之松  阅读(349)  评论(0)    收藏  举报