JS三级可折叠菜单实现方法


Posted in Javascript onFebruary 29, 2016

本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考,具体如下:

.ASPX代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>无标题页</title>
  <script type="text/javascript" src="JScript.js" ></script>
  <style type="text/css">
*{
 margin: 0px;
 padding: 0px;
 border:0px;
}
#nav{
 width: 600px;
 margin: 0px;
 padding: 0px;
 font-size: 14px;
 line-height: 30px;
}
#nav li{
 width: 180px;
 padding-left: 20px;
 padding-bottom: 1px;
 list-style-image: none;
 list-style-type: none;
 background-color: #FFFFFF;
}
#nav a{
 padding-left: 20px;
 background-color: #BFBFBF;
 display: block;
 text-decoration: none;
}
#nav a:hover {
 background-color: #FF9175;
}
#nav li ul{
 padding-top: 1px;
 list-style-image: none;
 list-style-type: none;
}
#nav li li{
 padding-left: 0px;
}
#nav ul a{
 background-color: #EBEBEB;
}
.cx {
 display:none;
 visibility:hidden;
}
.ex {
 display:inherit;
 visibility:inherit;
}
</style>
<script type="text/javascript" >
 window.onload=function(){
 statUp();
 }
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Parent">
<ul id="nav">
<li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单1</a>
 <ul>
 <li><a href="javascript:void(0);">菜单1_1</a></li>
 <li><a href="javascript:void(0);">菜单1_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')" >菜单2_1</a>
 <ul>
 <li>菜单2_1_1</li>
 <li>菜单2_1_2</li>
 </ul>
 </li>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')">菜单2_2</a>
  <ul>
 <li>菜单2_2_1</li>
 </ul>
 </li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js文件代码:

function doMenu(obj,strDeep){
 var items=obj.parentNode.getElementsByTagName("ul");
 //获取a 对象你节点li 下包含的 所有ul集合
 var itmUl;
 var deeps=strDeep; //strDeep 为当前菜单的级数
 if(items.length>0){
 itmUl=items[0];
 alert(itmUl);
 }
 if(itmUl.className!="ex"){
 cxAll();//当前节点为关闭状态时,先执行关闭所有ul子菜单
 if(deeps=='2'){ //若要展开三级菜单当,还要将其二级父菜单展开
 itmUl.parentNode.parentNode.className="ex";
 }
 itmUl.className="ex"; //展开下级菜单
 }else{
 itmUl.className="cx";
 }
}
function statUp(){
 cxAll();
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
}
function cxAll(){
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
 for (var i=0;i<items.length;i++)
 {
 items[i].className="cx";
 }
}

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

Javascript 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
ES6 javascript的异步操作实例详解
Oct 30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
精通JavaScript的this关键字
May 28 #Javascript
javascript正则表达式总结
Feb 29 #Javascript
javascript计时器编写过程与实现方法
Feb 29 #Javascript
javascript插件开发的一些感想和心得
Feb 28 #Javascript
详解Javascript中的Object对象
Feb 28 #Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 #Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 #Javascript
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
Angular2入门--架构总览
2017/03/29 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python random模块的使用示例
2020/10/10 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
护理实习自我鉴定
2013/12/14 职场文书
旅游个人求职信范文
2014/01/30 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
民间借贷借条如何写
2015/05/26 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
Flask response响应的具体使用
2021/07/15 Python
python基础之函数的定义和调用
2021/10/24 Python