用JS做的简单的可折叠的两级树形菜单
用JS做的简单的可折叠的两级树形菜单
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:可折叠的两级菜单window.onload=function(){varlistUL=document.getElemen...

复制代码 代码如下:

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<hrad>

<metahttp-equiv="content-type"content="text/html;charset=utf-8">

<title>可折叠的两级菜单</title>

<styletype="text/css">

<>

</style>

<scriptlanguage="javascript">

window.onload=function(){

varlistUL=document.getElementById("listUL");

varolist=listUL.childNodes;

varoa=0;

for(var i = 0; i < olist.length; i++) {

if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){

oa=olist[i];

oa.onclick=change;

}

}

functionchange(){

varos=this.getElementsByTagName("ul")[0];

if(os.className=="myHide")

os.className="myShow";

else

os.className="myHide";

}

}

</script>

</hrad>

<body>

<divid="navigation">

<ulid="listUL">

<li>

<divclass="txt">Home</div>

</li>

<li>

<divclass="txt">news</div>

<ulclass="myHide">

<li><ahref="#">lastest news</a></li>

<li><ahref="#">all news</a></li>

</ul>

</li>

<li>

<divclass="txt">sports</div>

<ulclass="myHide">

<li><ahref="#">lastest news</a></li>

<li><ahref="#">all news</a></li>

</ul>

</li>

<li>

<divclass="txt">weather</div>

<ulclass="myHide">

<li><ahref="#">lastest news</a></li>

<li><ahref="#">all news</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类