<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=gb2312"
/>
<
title
>CSS+JavaScript三级折叠菜单</
title
>
<
style
>
*,body,ul,li,h1,h2 {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 12px "宋体";
padding-top: 20px;
}
#menu {
width: 200px;
margin: auto;
}
#menu h1 {
cursor: pointer;
color: #FFF;
font-size: 12px;
padding: 5px 0 3px 10px;
border: #C60 1px solid;
margin-top: 1px;
#F93;
}
#menu h2 {
cursor: pointer;
color: #777;
font-size: 12px;
padding: 5px 0 3px 10px;
border: #E7E7E7 1px solid;
border-top-color: #FFF;
#F4F4F4;
}
#menu ul {
padding-left: 15px;
height: 100px;
border: #E7E7E7 1px solid;
border-top: none;
overflow: auto;
}
#menu ul li {
padding: 5px 0 3px 10px;
}
.no {
display: none;
}
</
style
>
<
script
language
=
"JavaScript"
>
<!--//
function ShowMenu(obj, noid) {
var block = document.getElementById(noid);
var n = noid.substr(noid.length - 1);
if (noid.length == 4) {
var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
for (var i = 0; i < h2.length; i++) {
h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
h2[i].style.color = "";
}
obj.style.color = "#FF0000";
for (var i = 0; i < ul.length; i++) {
if (i != n) {
ul[i].className = "no";
}
}
} else {
var span = document.getElementById("menu").getElementsByTagName("span");
var h1 = document.getElementById("menu").getElementsByTagName("h1");
for (var i = 0; i < h1.length; i++) {
h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
h1[i].style.color = "";
}
obj.style.color = "#0000FF";
for (var i = 0; i < span.length; i++) {
if (i != n) {
span[i].className = "no";
}
}
}
if (block.className == "no") {
block.className = "";
obj.innerHTML = obj.innerHTML.replace("-", "+");
} else {
block.className = "no";
obj.style.color = "";
}
}
//-->
</
script
>
</
head
>
<
body
>
<
div
id
=
"menu"
>
<
h1
onClick
=
"javascript:ShowMenu(this,'NO0')"
> - 一级菜单A</
h1
>
<
span
id
=
"NO0"
class
=
"no"
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO00')"
> - 一级菜单A_1</
h2
>
<
ul
id
=
"NO00"
class
=
"no"
>
<
li
>一级菜单A_0</
li
>
<
li
>一级菜单A_1</
li
>
<
li
>一级菜单A_2</
li
>
<
li
>一级菜单A_3</
li
>
<
li
>一级菜单A_4</
li
>
<
li
>一级菜单A_5</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO01')"
> - 一级菜单A_2</
h2
>
<
ul
id
=
"NO01"
class
=
"no"
>
<
li
>一级菜单A_0</
li
>
<
li
>一级菜单A_1</
li
>
<
li
>一级菜单A_2</
li
>
<
li
>一级菜单A_3</
li
>
<
li
>一级菜单A_4</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO02')"
> - 一级菜单A_3</
h2
>
<
ul
id
=
"NO02"
class
=
"no"
>
<
li
>一级菜单A_0</
li
>
<
li
>一级菜单A_1</
li
>
<
li
>一级菜单A_2</
li
>
<
li
>一级菜单A_3</
li
>
<
li
>一级菜单A_4</
li
>
<
li
>一级菜单A_5</
li
>
<
li
>一级菜单A_6</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO03')"
> - 一级菜单A_4</
h2
>
<
ul
id
=
"NO03"
class
=
"no"
>
<
li
>一级菜单A_0</
li
>
<
li
>一级菜单A_1</
li
>
<
li
>一级菜单A_2</
li
>
<
li
>一级菜单A_3</
li
>
<
li
>一级菜单A_4</
li
>
<
li
>一级菜单A_5</
li
>
<
li
>一级菜单A_6</
li
>
<
li
>一级菜单A_7</
li
>
</
ul
>
</
span
>
<
h1
onClick
=
"javascript:ShowMenu(this,'NO1')"
> - 二级菜单B</
h1
>
<
span
id
=
"NO1"
class
=
"no"
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO10')"
> - 二级菜单B_1</
h2
>
<
ul
id
=
"NO10"
class
=
"no"
>
<
li
>二级菜单B_0</
li
>
<
li
>二级菜单B_1</
li
>
<
li
>二级菜单B_2</
li
>
<
li
>二级菜单B_3</
li
>
<
li
>二级菜单B_4</
li
>
<
li
>二级菜单B_5</
li
>
<
li
>二级菜单B_6</
li
>
<
li
>二级菜单B_7</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO11')"
> - 二级菜单B_2</
h2
>
<
ul
id
=
"NO11"
class
=
"no"
>
<
li
>二级菜单B_0</
li
>
<
li
>二级菜单B_1</
li
>
<
li
>二级菜单B_2</
li
>
<
li
>二级菜单B_3</
li
>
<
li
>二级菜单B_4</
li
>
<
li
>二级菜单B_5</
li
>
<
li
>二级菜单B_6</
li
>
<
li
>二级菜单B_7</
li
>
</
ul
>
</
span
>
<
h1
onClick
=
"javascript:ShowMenu(this,'NO2')"
> - 三级菜单C</
h1
>
<
span
id
=
"NO2"
class
=
"no"
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO20')"
> - 三级菜单C_1</
h2
>
<
ul
id
=
"NO20"
class
=
"no"
>
<
li
>三级菜单C_0</
li
>
<
li
>三级菜单C_1</
li
>
<
li
>三级菜单C_2</
li
>
<
li
>三级菜单C_3</
li
>
<
li
>三级菜单C_4</
li
>
<
li
>三级菜单C_5</
li
>
<
li
>三级菜单C_6</
li
>
<
li
>三级菜单C_7</
li
>
<
li
>三级菜单C_8</
li
>
<
li
>三级菜单C_9</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO21')"
> - 三级菜单C_2</
h2
>
<
ul
id
=
"NO21"
class
=
"no"
>
<
li
>三级菜单C_0</
li
>
<
li
>三级菜单C_1</
li
>
<
li
>三级菜单C_2</
li
>
<
li
>三级菜单C_3</
li
>
<
li
>三级菜单C_4</
li
>
</
ul
>
</
span
>
<
h1
onClick
=
"javascript:ShowMenu(this,'NO3')"
> - 四级菜单D</
h1
>
<
span
id
=
"NO3"
class
=
"no"
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO30')"
> - 四级菜单D_1</
h2
>
<
ul
id
=
"NO30"
class
=
"no"
>
<
li
>四级菜单D_0</
li
>
<
li
>四级菜单D_1</
li
>
<
li
>四级菜单D_2</
li
>
<
li
>四级菜单D_3</
li
>
</
ul
>
<
h2
onClick
=
"javascript:ShowMenu(this,'NO31')"
> - 四级菜单D_2</
h2
>
<
ul
id
=
"NO31"
class
=
"no"
>
<
li
>四级菜单D_0</
li
>
<
li
>四级菜单D_1</
li
>
<
li
>四级菜单D_2</
li
>
<
li
>四级菜单D_3</
li
>
<
li
>四级菜单D_4</
li
>
<
li
>四级菜单D_5</
li
>
</
ul
>
</
span
>
</
div
>
</
body
>
</
html
>