js练习-左侧菜单

最新推荐文章于 2024-10-10 10:50:43 发布

weixin_30653023

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/forqiwen/p/8098146.html

版权

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