首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 06, 2015

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

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

实现代码如下：

<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程序设计有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
用原生js做单页应用
Jan 17 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
JOIN(1) netty(1) Launch Mode(1) json_extract(1) 缓冲区(1) 类加载器(1) NoSQL(1) form表单(1) 弹窗(1) 变量提升(1)
You might like
推荐文章系统（一）
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
营业员个人总结的自我评价
2013/10/25 职场文书
后进生转化工作制度
2014/01/17 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
职务任命书范本
2014/06/05 职场文书
2014年领班工作总结
2014/11/25 职场文书
钱学森观后感
2015/06/04 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Python实现归一化算法详情
2022/03/18 Python