JS技术

Javascript教程_三级折叠菜单源码教程_Javascript教程(2)

字号+ 作者：H5之家 来源：H5之家 2015-09-27 11:05 我要评论( )

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html xmlns= head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title三级折叠菜单/title style *,body,ul,h1,h2{ margin:0;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级折叠菜单</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
a{ color:#777;border:none;}
#menu { width:200px; margin:auto;}
 #menu h1 { font-size:12px; border:#C60 1px solid; margin-top:1px;  background-color:#F93;}
 #menu h2 { font-size:12px; 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 a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
 #menu a:hover{ color:#6F0; background:#000;}
 #menu .no { display:none;}
 #menu .h1 a{color:#6F0;}
 #menu .h2 a{color:#06F;}
 #menu  h1 a{color:#FFF;}
</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].className = "";
  }
  obj.className = "h2";
  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].className = "";
   h1[i].innerHTML = h1[i].innerHTML.replace("+","-");
  }
  obj.className = "h1";
  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.className = "";
 }
}
//-->
</script>
</head>
<body>
<div id="menu">
 <h1 onClick="javascript:ShowMenu(this,'NO0')"><a href="javascript:void(0)">- 一级菜单A</a></a></h1>
 <span id="NO0" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO00')"><a href="javascript:void(0)">- 一级菜单A_1</a></a></h2>
  <ul id="NO00" class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO01')"><a href="javascript:void(0)">- 一级菜单A_2</a></h2>
  <ul id="NO01" class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO02')"><a href="javascript:void(0)">- 一级菜单A_3</a></h2>
  <ul id="NO02" class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO03')"><a href="javascript:void(0)">- 一级菜单A_4</a></h2>
  <ul id="NO03" class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
   <a href="javascript:void(0)">一级菜单A_4</a>
   <a href="javascript:void(0)">一级菜单A_5</a>
   <a href="javascript:void(0)">一级菜单A_6</a>
   <a href="javascript:void(0)">一级菜单A_7</a>
   <a href="javascript:void(0)">一级菜单A_8</a>
   <a href="javascript:void(0)">一级菜单A_9</a>
  </ul>
 </span>
       
 <h1 onClick="javascript:ShowMenu(this,'NO1')"><a href="javascript:void(0)">- 二级菜单B</a></h1>
 <span id="NO1" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO10')"><a href="javascript:void(0)">- 二级菜单B_1</a></h2>
  <ul id="NO10" class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_4</a>
   <a href="javascript:void(0)">二级菜单B_5</a>
   <a href="javascript:void(0)">二级菜单B_6</a>
   <a href="javascript:void(0)">二级菜单B_7</a>
   <a href="javascript:void(0)">二级菜单B_8</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO11')"><a href="javascript:void(0)">- 二级菜单B_2</a></h2>
  <ul id="NO11" class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_4</a>
   <a href="javascript:void(0)">二级菜单B_5</a>
   <a href="javascript:void(0)">二级菜单B_6</a>
   <a href="javascript:void(0)">二级菜单B_7</a>
   <a href="javascript:void(0)">二级菜单B_8</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
 </span>
   
 <h1 onClick="javascript:ShowMenu(this,'NO2')"><a href="javascript:void(0)">- 三级菜单C</a></h1>
 <span id="NO2" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO20')"><a href="javascript:void(0)">- 三级菜单C_1</a></h2>
  <ul id="NO20" class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
   <a href="javascript:void(0)">三级菜单C_4</a>
   <a href="javascript:void(0)">三级菜单C_5</a>
   <a href="javascript:void(0)">三级菜单C_6</a>
   <a href="javascript:void(0)">三级菜单C_7</a>
   <a href="javascript:void(0)">三级菜单C_8</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO21')"><a href="javascript:void(0)">- 三级菜单C_2</a></h2>
  <ul id="NO21" class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
   <a href="javascript:void(0)">三级菜单C_4</a>
   <a href="javascript:void(0)">三级菜单C_5</a>
   <a href="javascript:void(0)">三级菜单C_6</a>
   <a href="javascript:void(0)">三级菜单C_7</a>
   <a href="javascript:void(0)">三级菜单C_8</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
 </span>
   
 <h1 onClick="javascript:ShowMenu(this,'NO3')"><a href="javascript:void(0)">- 四级菜单D</a></h1>
 <span id="NO3" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO30')"><a href="javascript:void(0)">- 四级菜单D_1</a></h2>
  <ul id="NO30" class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO31')"><a href="javascript:void(0)">- 四级菜单D_2</a></h2>
  <ul id="NO31" class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
   <a href="javascript:void(0)">四级菜单D_4</a>
   <a href="javascript:void(0)">四级菜单D_5</a>
   <a href="javascript:void(0)">四级菜单D_6</a>
   <a href="javascript:void(0)">四级菜单D_7</a>
   <a href="javascript:void(0)">四级菜单D_8</a>
   <a href="javascript:void(0)">四级菜单D_9</a>
  </ul>
 </span>
</div>
</body>
</html>

　

查看Java

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评
精彩导读
【JavaScript.2】辨析Typeof操作符作用，罗列JS五大数据类型阵容 - 孟东辉 廊坊师范学院信息技术提高班

【JavaScript.2】辨析Typeof操作符作用，罗列

Word Search -- LeetCode - Code Ganker - 博客频道 - CSDN.NET Code

Word Search -- LeetCode - Code Ganker - 博

ubuntu 14.04 安装 minidwep-gtk, aircrack-ng, reaver 搭建抓包环境 - 心

ubuntu 14.04 安装 minidwep-gtk, aircrack-n

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博客频道 - CSDN.NET 巫_1曲待续 一个人走到任何境地全都是因

求职篇-带我装逼，带我飞 - 巫_1曲待续 - 博

ubuntu thrift 0.9.3编译安装 - Dean Chen的专栏 - 博客频道 - CSDN.NET Dea

ubuntu thrift 0.9.3编译安装 - Dean Chen的

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习