设为首页收藏本站
开启辅助访问 切换到宽版

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
搜索
返回列表 发新帖回复
楼主: ttx9n

[JavaScript] JS实现三级折叠菜单特效，其它级可自动收缩

[复制链接]
ttx9n

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 05:19:49 | 显示全部楼层 |阅读模式
这篇文章主要介绍了JS实现三级折叠菜单特效，其它级可自动收缩,需要的朋友可以参考下

本文实例讲述了JS实现三级折叠菜单特效，其它级可自动收缩。分享给大家供大家参考，很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行具体如下：
小贴士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;｝ 即可高度自适应
运行效果图如下：

实现代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<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,n){
 var Nav = obj.parentNode;
 if(!Nav.id){
 var BName = Nav.getElementsByTagName("ul");
 var HName = Nav.getElementsByTagName("h2");
 var t = 2;
 }else{
 var BName = document.getElementById(Nav.id).getElementsByTagName("span");
 var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
 var t = 1;
 }
 for(var i=0; i<HName.length;i++){
 HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
 HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
 BName[n].className = "";
 obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
 BName[n].className = "no";
 obj.className = "";
 obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>
</head>
<body>
<div id="menu">
 <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</a></a></h2>
 <ul 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,1)"><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
 <ul 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,2)"><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>
 <ul 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,3)"><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>
 <ul 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,4)"><a href="javascript:void(0)">+ 一级菜单A_5</a></h2>
 <ul 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,5)"><a href="javascript:void(0)">+ 一级菜单A_6</a></h2>
 <ul 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,6)"><a href="javascript:void(0)">+ 一级菜单A_7</a></h2>
 <ul 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,7)"><a href="javascript:void(0)">+ 一级菜单A_8</a></h2>
 <ul 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,8)"><a href="javascript:void(0)">+ 一级菜单A_9</a></h2>
 <ul 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,9)"><a href="javascript:void(0)">+ 一级菜单A_10</a></h2>
 <ul 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,10)"><a href="javascript:void(0)">+ 一级菜单A_11</a></h2>
 <ul 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,11)"><a href="javascript:void(0)">+ 一级菜单A_12</a></h2>
 <ul 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,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
 <ul 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,1)"><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
 <ul 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,2)"><a href="javascript:void(0)">+ 三级菜单C</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
 <ul 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,1)"><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
 <ul 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,3)"><a href="javascript:void(0)">+ 四级菜单D</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>
 <ul 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,1)"><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>
 <ul 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>

希望本文所述对大家的javascript程序设计有所帮助。

收缩, 折叠, 特效

相关帖子
回复

使用道具 举报

i3x3r3

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2022-10-24 20:17:36 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

Alisaliu

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2022-11-20 16:14:48 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

0vwrdf6

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-7 00:29:54 | 显示全部楼层
额UI废物iuhfujewfiewnnfen
回复 支持 反对

使用道具 举报

6q8s6p21

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-3 14:43:37 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

adm1n

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2023-6-3 20:30:56 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

dingzhi521

2

主题

2万

回帖

73

积分

注册会员

Rank: 2

积分
73
发表于 2023-7-25 23:27:11 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

nwk53kbd

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-22 18:05:44 | 显示全部楼层
66666666666
回复 支持 反对

使用道具 举报

dm00ji1s

1

主题

2万

回帖

319

积分

中级会员

Rank: 3Rank: 3

积分
319
发表于 2024-1-12 06:19:55 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

回复用户1

0

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2024-3-16 20:35:16 | 显示全部楼层
抽根烟，下来看看再说
回复 支持 反对

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-5 06:06 , Processed in 0.075387 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表