html三级折叠菜单,JS三级可折叠菜单实现方法

本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考，具体如下：

.ASPX代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题页

*{

margin: 0px;

padding: 0px;

border:0px;

}

#nav{

width: 600px;

margin: 0px;

padding: 0px;

font-size: 14px;

line-height: 30px;

}

#nav li{

width: 180px;

padding-left: 20px;

padding-bottom: 1px;

list-style-image: none;

list-style-type: none;

background-color: #FFFFFF;

}

#nav a{

padding-left: 20px;

background-color: #BFBFBF;

display: block;

text-decoration: none;

}

#nav a:hover {

background-color: #FF9175;

}

#nav li ul{

padding-top: 1px;

list-style-image: none;

list-style-type: none;

}

#nav li li{

padding-left: 0px;

}

#nav ul a{

background-color: #EBEBEB;

}

.cx {

display:none;

visibility:hidden;

}

.ex {

display:inherit;

visibility:inherit;

}

window.οnlοad=function(){

statUp();

}

• 菜单1
  • 菜单1_1
  • 菜单1_2
• 菜单2
  • 菜单2_1
    • 菜单2_1_1
    • 菜单2_1_2
  • 菜单2_2
    • 菜单2_2_1

js文件代码：

function doMenu(obj,strDeep){

var items=obj.parentNode.getElementsByTagName("ul");

//获取a 对象你节点li 下包含的 所有ul集合

var itmUl;

var deeps=strDeep; //strDeep 为当前菜单的级数

if(items.length>0){

itmUl=items[0];

alert(itmUl);

}

if(itmUl.className!="ex"){

cxAll();//当前节点为关闭状态时,先执行关闭所有ul子菜单

if(deeps=='2'){ //若要展开三级菜单当,还要将其二级父菜单展开

itmUl.parentNode.parentNode.className="ex";

}

itmUl.className="ex"; //展开下级菜单

}else{

itmUl.className="cx";

}

}

function statUp(){

cxAll();

var ulDom=document.getElementById("nav");

var items=ulDom.getElementsByTagName("ul");

}

function cxAll(){

var ulDom=document.getElementById("nav");

var items=ulDom.getElementsByTagName("ul");

for (var i=0;i

{

items[i].className="cx";

}

}

希望本文所述对大家JavaScript程序设计有所帮助。