论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

编写三级折叠菜单_源码

文章类别：Javascript | 发表日期:2010-3-27 12:24:53

21视频教程网3月27日整理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级折叠菜单</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;  background-color:#F93;}
 #menu h2 { cursor:pointer; color:#777; font-size:12px; padding:5px 0 3px 10px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#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>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</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>
   <li>一级菜单A_5</li>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</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>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</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>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</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>
   <li>二级菜单B_8</li>
   <li>二级菜单B_9</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>
   <li>二级菜单B_8</li>
   <li>二级菜单B_9</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>
   <li>三级菜单C_5</li>
   <li>三级菜单C_6</li>
   <li>三级菜单C_7</li>
   <li>三级菜单C_8</li>
   <li>三级菜单C_9</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>
   <li>四级菜单D_4</li>
   <li>四级菜单D_5</li>
   <li>四级菜单D_6</li>
   <li>四级菜单D_7</li>
   <li>四级菜单D_8</li>
   <li>四级菜单D_9</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>
   <li>四级菜单D_6</li>
   <li>四级菜单D_7</li>
   <li>四级菜单D_8</li>
   <li>四级菜单D_9</li>
  </ul>
 </span>
</div>
</body>
</html>

上一篇：编写无限级横向菜单_源码 人气:2786
下一篇：编写三级折叠菜单_源码 人气:3633
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058