<style type="text/css">
*{ margin:0px auto; padding:0px;}
#wai{ width:600px; height:500px;}
.cp{ width:200px; height:30px; background-color:#4C4C4C; text-align:center; vertical-align:middle; line-height:30px;
font-size:18px;}
.zcd{ width:200px; height:60px; display:none;}
.zcd_xilie{ width:198px; height:28px; border:1px solid #903;}
</style>
</head>
<body>
<div id="wai">
???<div class="cp" xs="0">华为</div>
???????<div class="zcd">
???????<div class="zcd_xilie">系列1</div>
???????????<div class="zcd_xilie">系列2</div>
???????????
???????</div>
??????<div class="cp" xs="0">小米</div>
???????<div class="zcd">
???????<div class="zcd_xilie">小米1</div>
???????<div class="zcd_xilie">小米2</div>
???????
???????</div>
???????<div class="cp" xs="0">锤子</div>
???????<div class="zcd">
???????<div class="zcd_xilie">T1</div>
???????<div class="zcd_xilie">T2</div>
???????</div> ??????
</div>
</body>
<script type="text/javascript">
var cp = document.getElementsByClassName("cp");
???/*
???????用自定义的xs属性判断子菜单的状态，若子菜单隐藏则点击主菜单选项显示子菜单，若子菜单已显示，则点击主菜单选项收回子菜单
???*/
???for(var i=0;i<cp.length;i++)
???{
???????cp[i].onclick = function()
???????{
???????????var xs = this.getAttribute("xs");
???????????if(xs==0)
???????????{
???????????????this.nextSibling.nextSibling.style.display = "block";
???????????????this.setAttribute("xs","1");
???????????}
???????????else
???????????{
???????????????this.nextSibling.nextSibling.style.display = "none";
???????????????this.setAttribute("xs","0"); ???
???????????}
???????}
???}
js练习-左侧菜单
原文地址：http://www.cnblogs.com/forqiwen/p/8098146.html