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

赞 (0)

相关推荐

  • Bootstrap打造一个左侧折叠菜单的系统模板(一)

    Bootstrap打造一个左侧折叠菜单的系统模板(一)

    1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

  • Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • Bootstrap打造一个左侧折叠菜单的系统模板(二)

    Bootstrap打造一个左侧折叠菜单的系统模板(二)

    在上一篇文章给大家介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一),具体内容介绍可以点击了解详情. 1. 关于上一篇文章BUG 上一篇文章中有几位朋友提出的问题和BUG. 我简单的说一下. 1>. IE版本的支持? 我写的这些只是测试火狐谷歌浏览.在IE8+下可以添加代码以实现兼容. <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js&qu

  • 折叠菜单及选择器的运用

    今天才发现原来筛选标签还可以这么用. not(expr|ele | fn):从匹配元素的集合中删除与指定表达式匹配的元素 下面demo中的使用:   var $category =  $(".sub-category-box>ul>li:gt(2):not(:last)");  //列表中索引大于2的,除了最后一个 filter(expr|obj|ele|fn) :r筛选出与指定表达式匹配的元素集合.这个方法用于缩小匹配的范围.用逗号分隔多个表达式 $("ul&g

  • 微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器实例详解(附源码下载)

    微信小程序 省市区选择器:       最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换 思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu

  • 微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器（时间，日期，地区）实例详解

    微信小程序 选择器(时间,日期,地区) 微信小程序 开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti

  • jQuery实现的简单折叠菜单(折叠面板)效果代码

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • JS实现超简单的仿QQ折叠菜单效果

    JS实现超简单的仿QQ折叠菜单效果

    本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

随机推荐