脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript实现三级折叠菜单特效

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

 更新时间：2015年08月06日 16:30:39   投稿：lijiao  
这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 小程序富文本提取图片可放大缩小

    小程序富文本提取图片可放大缩小

    这篇文章主要为大家详细介绍了小程序富文本提取图片可放大缩小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 微信小程序事件绑定传参冒泡及捕获的示例详解

    微信小程序事件绑定传参冒泡及捕获的示例详解

    这篇文章主要为大家介绍了微信小程序事件绑定传参冒泡及捕获的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
    2022-04-04
  • Vue项目中关于全局css的处理

    Vue项目中关于全局css的处理

    我们在写CSS的时候，会遇到大量相同的属性(比如：margin-top:10px)这种属性几乎每个vue页面都有。这个时候，我们可以把css挂载到全局上，供所有vue页面使用，同时也方便修改。感兴趣的同学可以参考一下
    2023-04-04
  • 用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法

    用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。
    2009-09-09
  • javascript 数组排序函数

    javascript 数组排序函数

    javascript的数组排序函数 sort方法，默认是按照ASCII 字符顺序进行升序排列。
    2009-08-08
  • javascript中tostring()和valueof()的用法及两者的区别

    javascript中tostring()和valueof()的用法及两者的区别

    基本上，所有JS数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题，本文给大家介绍javascript中tostring()和valueof()的用法及两者的区别，对js tostring valueof相关知识感兴趣的朋友一起学习吧
    2015-11-11
  • JavaScript 装饰器模式用法详解

    JavaScript 装饰器模式用法详解

    装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许动态地向一个对象添加新的行为，本文将带大家详细了解一下JavaScript装饰器模式，文中有相关的示例代码供大家参考，感兴趣的同学可以跟着小编一起学习
    2023-05-05
  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    默认显示部分文字，点击按钮显示全部，类似这样的功能在一些特殊的地方会见到吧，下面与大家分享下JS、jQuery如何实现，感兴趣的朋友可以参考下哈，希望对你有所帮助
    2013-05-05
  • javascript表单验证 - Parsley.js使用和配置

    javascript表单验证 - Parsley.js使用和配置

    大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦
    2013-01-01
  • js+css3实现旋转效果

    js+css3实现旋转效果

    本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论