<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html class="menuHtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/menuswitch.js"></script>
</head>
<body>
<div class="menuDiv">
<h3>功能管理模块1</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块2</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块3</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块4</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<ul>
<li><a href="#">退出管理后台</a></li>
</ul>
</div>
<script language="javascript">
var mSwitch = new MenuSwitch("menuDiv");
mSwitch.setDefault(0);
mSwitch.setPrevious(true);
mSwitch.init();
</script>
</body>
</html>
-----------------------------------------------------
function MenuSwitch(className){
this._elements = [];
this._default = -1;
this._className = className;
this._previous = false;
}
MenuSwitch.prototype.setDefault = function(id){
this._default = Number(id);
}
MenuSwitch.prototype.setPrevious = function(flag){
this._previous = Boolean(flag);
}
MenuSwitch.prototype.collectElementbyClass = function(){
this._elements = [];
var allelements = document.getElementsByTagName("div");
for(var i=0;i<allelements.length;i++){
var mItem = allelements[i];
if (typeof mItem.className == "string" && mItem.className == this._className){
var h3s = mItem.getElementsByTagName("h3");
var uls = mItem.getElementsByTagName("ul");
if(h3s.length == 1 && uls.length == 1){
h3s[0].style.cursor = "hand";
if(this._default == this._elements.length){
uls[0].style.display = "block";
}else{
uls[0].style.display = "none";
}
this._elements[this._elements.length] = mItem;
}
}
}
}
MenuSwitch.prototype.open = function(mElement){
var uls = mElement.getElementsByTagName("ul");
uls[0].style.display = "block";
}
MenuSwitch.prototype.close = function(mElement){
var uls = mElement.getElementsByTagName("ul");
uls[0].style.display = "none";
}
MenuSwitch.prototype.isOpen = function(mElement){
var uls = mElement.getElementsByTagName("ul");
return uls[0].style.display == "block";
}
MenuSwitch.prototype.toggledisplay = function(header){
var mItem;
if(window.addEventListener){
mItem = header.parentNode;
}else{
mItem = header.parentElement;
}
if(this.isOpen(mItem)){
this.close(mItem);
}else{
this.open(mItem);
}
if(!this._previous){
for(var i=0;i<this._elements.length;i++){
if(this._elements[i] != mItem){
var uls = this._elements[i].getElementsByTagName("ul");
uls[0].style.display = "none";
}
}
}
}
MenuSwitch.prototype.init = function(){
var instance = this;
this.collectElementbyClass();
if(this._elements.length==0){
return;
}
for(var i=0;i<this._elements.length;i++){
var h3s = this._elements[i].getElementsByTagName("h3");
if(window.addEventListener){
h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false);
}else{
h3s[0].onclick = function(){instance.toggledisplay(this);}
}
}
}
------------------------------------
body,td,th,div,a,h3,textarea,input{
font-family: "宋体", "Times New Roman", "Courier New";
font-size: 14px;
color: #333333;
}
html{
overflow-x:hidden;
overflow-y:scroll;
}
.menuHtml{
overflow-y:auto;
}
body {
background-color: #FFFFFF;
margin: 0px;
}
img{
border: none;
}
form{
margin: 0px;
padding: 0px;
}
input{
color: #000000;
height: 22px;
vertical-align: middle;
}
textarea{
width: 80%;
font-weight: normal;
color: #000000;
}
a{
text-decoration: underline;
color: #666666;
}
a:hover{
text-decoration: none;
}
.menuDiv{
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
padding: 1px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 0px;
}
.menuDiv h3{
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 15px;
background-color: #999999;
margin: 0px;
}
.menuDiv ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menuDiv ul li{
color: #666666;
background-color: #EEEEEE;
display: block;
padding: 5px 5px 5px 15px;
font-size: 14px;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 16px;
}
.menuDiv ul li a{
color: #666666;
background-color: #F4F4F4;
display: block;
padding: 5px 5px 5px 15px;
font-size: 14px;
margin-top: -5px;
margin-right: -5px;
margin-bottom: -5px;
margin-left: -15px;
text-decoration: none;
height: 16px;
}
.menuDiv ul li a:hover{
color: #FFFFFF;
background-color: #DDDDDD;
}
.red{
color:#FF0000;
}
-------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html class="menuHtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/menuswitch.js"></script>
</head>
<body>
<div class="menuDiv">
<h3>功能管理模块1</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块2</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块3</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<h3>功能管理模块4</h3>
<ul>
<li><a href="#">菜单功能项1</a></li>
<li><a href="#">菜单功能项2</a></li>
<li><a href="#">菜单功能项3</a></li>
<li><a href="#">菜单功能项3</a></li>
</ul>
</div>
<div class="menuDiv">
<ul>
<li><a href="#">退出管理后台</a></li>
</ul>
</div>
<script language="javascript">
var mSwitch = new MenuSwitch("menuDiv");
mSwitch.setDefault(0);
mSwitch.setPrevious(false);
mSwitch.init();
</script>
</body>
</html>