<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS+CSS打造三级折叠菜单，自动收缩其它级</title>

<style>

*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}

body{font:12px "宋体"; padding-top:20px;} a{ color:white;border:none;}

#menu { width:200px; margin:auto;}

#menu h1 { font-size:12px; border:gray 1px solid; margin-top:1px;  background-color:gray;}

#menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#00CCFF;}

#menu ul { padding-left:0px; height:auto;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}

#menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}

#menu ul a { display:block; padding:5px 0 3px 15px; text-decoration:none; overflow:hidden;background-color:white;color:black;}

#menu ul a:hover  {      color:Black;background:red;      }

#menu a:hover{ color:white; background:red;}  #menu .no {display:none;}

</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></h1>

<span class="no">

<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</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>

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

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

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

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

</ul>

</span>

</div>

</body>

</html>

JS+CSS打造三级折叠菜单，自动收缩其它级 js的更多相关文章

  1. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  2. 基于jquery打造的网页右侧自动收缩浮动在线客服代码

    基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...

  3. 【酷】JS+CSS打造沿Y轴纵深运动的3D球体

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  5. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  6. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  7. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  8. JS CSS写下拉菜单 竖行

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

随机推荐

  1. jsp 有哪些动作?作用分别是什么?

    答:JSP 共有以下 6 种基本动作jsp:include: 在页面被请求的时候引入一个文件.jsp:useBean: 寻找或者实例化一个 JavaBean.jsp:setProperty: 设置 J ...

  2. BZOJ 1218: [HNOI2003]激光炸弹( 前缀和 + 枚举 )

    虽然source写着dp , 而且很明显dp可以搞...但是数据不大 , 前缀和 + 枚举也水的过去..... -------------------------------------------- ...

  3. C#操作Office.word(三）

    前面两篇博客讲解了怎么通过程序控制word的生成,包括生成文字.添加表格.添加图片等.这篇博客主要说一下怎么把word图片转换成pdf. using System; using System.Coll ...

  4. java 读文件 解析

    [Java]读取文件方法大全   1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile {     /**     ...

  5. awk的用法（转）

    awk 用法:awk ' pattern {action} ' 变量名 含义 ARGC 命令行变元个数 ARGV 命令行变元数组 FILENAME 当前输入文件名 FNR 当前文件中的记录号 FS 输 ...

  6. Push segues can only be used when the.....

    刚刚遇到的两个错误,. 1, Terminating app due to uncaught exception'NSGenericException', reason: 'Push segues c ...

  7. 怪兽z主机标准版视频测试。

    我的淘宝店很早就开张了,但是一直没有好好打理,这次给大家带来的是本店所售一款主机的视频测试. CPU:AMD -A10 6700 主板:映泰Hi-Fi A88S3E 内存条:正品金士顿骇客游戏神条 机 ...

  8. 阿里云ECS每天一件事D1：配置SSH

    近期因为项目需求,采购了两台阿里云ECS,选择的系统为CentOS 6.3 X64 安全加固版,额外买了160G的硬盘,应该够应付此项目的需求了. ECS默认已经配置好了sshd服务,可以使用root ...

  9. 射频识别技术漫谈(7)——ID卡

    ID(Identification)是识别的意思,ID卡就是识别卡.ID卡包含范围广泛,只要具有识别功能的卡片都可以叫ID卡,例如条码卡,磁卡都可以是ID卡,我们这儿说的当然是射频识别卡. 射频ID卡 ...

  10. HDU 1000 A + B Problem

    #include int main() { int a,b; while(scanf("%d%d",&a,&b)!=EOF) printf("%d\n&q ...