<!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 { 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>