三级折叠菜单

发表于 2012年01月03日
前端
更新于 2016年08月02日 1:06:03 上午

<!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,dl,ul,dt,dd,h2{ margin:0; padding:0;}
body{font:12px "宋体"; padding-top:20px;}
#menu { width:200px; margin:0 auto;}
	#menu dt {font-weight:700; font-size:12px; border:#C60 1px solid; margin-top:1px;  background-color:#F93;}
	#menu dd {display:none;}
	#menu dd h2 {display:block; font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}
	#menu dd ul { display:none;height:100px; padding-left:15px; border:#E7E7E7 1px solid; border-top:none; overflow:auto;}
	#menu a {color:#777; border:none; text-decoration:none;display:block; padding:5px 0 3px 10px; ; overflow:hidden;}
	#menu dt a { color:#FFF; }
	#menu dt.off a{color:#6F0;}
	#menu h2.off a{color:#00F;}
	#menu a:hover{ color:#6F0; background-color:#333;}
</style>
</head>
<body>
<dl id="menu">
	<dt><a href="javascript:void(0)">+ 一级菜单A</a></dt>
	<dd>
		<h2><a href="javascript:void(0)">+ 一级菜单A_1</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>
		<ul>
			<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>
	</dd>
        
	<dt><a href="javascript:void(0)">+ 二级菜单B</a></dt>
	<dd>
		<h2><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
		<ul>
			<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>
	</dd>
    
	<dt><a href="javascript:void(0)">+ 三级菜单C</a></dt>
	<dd>
		<h2><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
		<ul>
			<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>
	</dd>
    
	<dt><a href="javascript:void(0)">+ 四级菜单D</a></dt>
	<dd>
		<h2><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>
		<ul>
			<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><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>
		<ul>
			<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>
	</dd>
</dl>
<script language="JavaScript">
<!--//
function $Id(Id){return document.getElementById(Id);}
function $Tag(id,Tag){return id.getElementsByTagName(Tag);}
function ShowMenu(e){
	var $dt = $Tag($Id(e),"dt");
	var $dd = $Tag($Id(e),"dd");
	$dd[0].style.display = "block";
	for(var t=0;t<$dt.length;t++){
		$dt[t].value=t;
		$dt[t].onclick = function(){return ShowClose(this,this.value);}
		var $h2 = $Tag($dd[t],"h2");
		for(var h=0;h<$h2.length;h++){
			$h2[h].value=h;
			$h2[h].onclick = function(){return ShowClose(this,this.value);}
		}
	}
	function ShowClose(obj,n){
		var dt = $Tag(obj.parentNode,obj.tagName);
		var dd = $Tag(obj.parentNode,[obj.parentNode.tagName!="DL"?"ul":"dd"]);
		if(dd.length==0 || !dd[n]){return false;}
		if(dd[n].style.display == "block"){
			obj.className = "";
			obj.innerHTML = obj.innerHTML.replace("-","+");
			dd[n].style.display = "none";
			return false;
		}
		for(var i=0;i<dt.length;i++){
			dt[i].innerHTML=[i!=n?dt[i].innerHTML.replace("-","+"):dt[i].innerHTML.replace("+","-")];
			dt[i].className=[i!=n?"":"off"];
		}
		for(var i=0;i<dd.length;i++){dd[i].style.display=[i!=n?"none":"block"];}
	}
}
new ShowMenu( "menu");
//-->
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>三级折叠菜单</title>

<style>

body,dl,ul,dt,dd,h2{ margin:0; padding:0;}

body{font:12px "宋体"; padding-top:20px;}

#menu { width:200px; margin:0 auto;}

#menu dt {font-weight:700; font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;}

#menu dd {display:none;}

#menu dd h2 {display:block; font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}

#menu dd ul { display:none;height:100px; padding-left:15px; border:#E7E7E7 1px solid; border-top:none; overflow:auto;}

#menu a {color:#777; border:none; text-decoration:none;display:block; padding:5px 0 3px 10px; ; overflow:hidden;}

#menu dt a { color:#FFF; }

#menu dt.off a{color:#6F0;}

#menu h2.off a{color:#00F;}

#menu a:hover{ color:#6F0; background-color:#333;}

</style>

</head>

<body>

<dt><a href="javascript:void(0)">+ 一级菜单A</a></dt>

<dd>

<h2><a href="javascript:void(0)">+ 一级菜单A_1</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>

<ul>

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

</dd>

<dt><a href="javascript:void(0)">+ 二级菜单B</a></dt>

<dd>

<h2><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>

<ul>

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

</dd>

<dt><a href="javascript:void(0)">+ 三级菜单C</a></dt>

<dd>

<h2><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>

<ul>

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

</dd>

<dt><a href="javascript:void(0)">+ 四级菜单D</a></dt>

<dd>

<h2><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>

<ul>

<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><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>

<ul>

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

</dd>

</dl>

<!--//

function $Id(Id){return document.getElementById(Id);}

function $Tag(id,Tag){return id.getElementsByTagName(Tag);}

function ShowMenu(e){

var $dt = $Tag($Id(e),"dt");

var $dd = $Tag($Id(e),"dd");

$dd[0].style.display = "block";

for(var t=0;t<$dt.length;t++){

$dt[t].value=t;

$dt[t].onclick = function(){return ShowClose(this,this.value);}

var $h2 = $Tag($dd[t],"h2");

for(var h=0;h<$h2.length;h++){

$h2[h].value=h;

$h2[h].onclick = function(){return ShowClose(this,this.value);}

}

function ShowClose(obj,n){

var dt = $Tag(obj.parentNode,obj.tagName);

var dd = $Tag(obj.parentNode,[obj.parentNode.tagName!="DL"?"ul":"dd"]);

if(dd.length==0 || !dd[n]){return false;}

if(dd[n].style.display == "block"){

obj.className = "";

obj.innerHTML = obj.innerHTML.replace("-","+");

dd[n].style.display = "none";

return false;

}

for(var i=0;i<dt.length;i++){

dt[i].innerHTML=[i!=n?dt[i].innerHTML.replace("-","+"):dt[i].innerHTML.replace("+","-")];

dt[i].className=[i!=n?"":"off"];

}

for(var i=0;i<dd.length;i++){dd[i].style.display=[i!=n?"none":"block"];}

}

new ShowMenu( "menu");

//-->

</script>

</body>

</html>

标签：代码收藏原文连接：三级折叠菜单 所有媒体，可在保留署名、原文连接的情况下转载，若非则不得使用我方内容。

关于圣诞节！尽可能短的拖动代码