<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");
}
}
}