JS技术

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

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

Javascript教程_三级折叠菜单源码教程,学习Javascript教程_三级折叠菜单源码教程,Javascript教程_三级折叠菜单源码教程,查看Javascript教程_三级折叠菜单源码教

Javascript教程_三级折叠菜单源码教程

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

 

这IE6蛮气人的！！ 整改加些鼠标事件

　

查看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教程 专题学习