js練習-左側菜單
<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練習-左側菜單