发布 2012-01-03 更新 2016-08-02 文章前端

三级折叠菜单

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

208

209

210

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

精选置顶

2026 BT磁力搜索引擎大全【最新优质】

用uBlock Origin过滤广告，享受最好的广告拦截体验

手机BT/种子下载，手机磁力链下载软件整理

相关文章

🚀 终极终端：iTerm2 + Oh My Zsh 生产力榨干指南

tcpdf中增加字体的正确方式

解决html2canvas+jspdf 生成pdf 模糊的问题

vue3+ts+vite项目，解决找不到模块声明的错误